Webpack output files to different directories -

after building project, have index.html, bundle.js , .css files, them placed in dir structure this:

dist/     - css/all.my.css     - js/bundle.js     - index.html 

here did .js , .css:

entry: {     app: path.resolve(__dirname, 'app/src/index.js'), }, output: {     path: path.resolve(__dirname, 'dist', 'css'),     filename: '../js/[name].js' }, 

here corresponding module config:

module: {     loaders: [{         test: /\.jsx?$/,         loaders: ['react-hot', 'babel-loader'],         exclude: /node_modules/     },     {       test: /\.css$/,       loader: extracttextplugin.extract("style-loader", "css-loader")     },     {       test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,       loader: "url-loader?limit=10000&mimetype=application/font-woff"     },     {       test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,       loader: "file-loader"     }] }, 

i have no idea how copy index.html folder , put under dist/. know file-loader needed should write under entry , output?

thanks!

---

i figured out , here solution:

output: {         path: path.resolve(__dirname, '../dist'),   // output directory, placed under here         filename: 'js/bundle.js', // move bundle.js file under js/ folder, dir structure /dist/js/bundle.js } 

to move css file under dist/css/:

module: {     loaders: [{         test: /\.css$/,             loader: extracttextplugin.extract('style-loader', 'css-loader!cssnext-loader')      }] } 

i used extracttextplugin, config output path of css file, had define in plugins section:

plugins: [     new extracttextplugin('./css/bundle.css'), // bundle.css put under /dist/css/ ] 

to move images , fonts own folder:

module: {     loaders: [{         test: /\.(png|jpg|svg)$/,         loader: 'url-loader?limit=8192&name=img/[name].[ext]'     }, {         test: /\.(woff|woff2|eot|ttf)$/,         loader: 'url-loader?limit=8192&name=fonts/[name].[ext]'     }] } 

pay attention how loader string defined: &name=img/[name].[ext] means using original file's name , extension , put under img/ folder. same goes font files.

here complete config file:

var webpack = require('webpack'),     path = require('path'),     extracttextplugin = require('extract-text-webpack-plugin'),     clean = require('clean-webpack-plugin')  module.exports = {     devtool: 'cheap-module-source-map',     entry: {         app: path.resolve(__dirname, '../app/index.js'),     },     output: {         path: path.resolve(__dirname, '../dist'),         filename: 'js/bundle.js',         publicpath: '/static/'     },     module: {         loaders: [{             test: /\.js$/,             loaders: ['babel?presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=transform-decorators-legacy'],             include: path.join(__dirname, '../app'),         },{             test: /\.css$/,             loader: extracttextplugin.extract('style-loader', 'css-loader!cssnext-loader')         },{             test: /\.(woff|woff2|eot|ttf)$/,             loader: 'url-loader?limit=8192&name=fonts/[name].[ext]'         },{             test: /\.(png|jpg|svg)$/,             loader: 'url-loader?limit=8192&name=img/[name].[ext]'         }]     },     cssnext: {         browsers: 'last 2 versions'     },     resolve: {         extensions: ['', '.js', '.jsx']     },     plugins: [         new clean([path.join(__dirname, '../dist')], {             root: path.join(__dirname, '..'),             verbose: true         }),         new extracttextplugin('./css/bundle.css', {allchunks: true}),         new webpack.ignoreplugin(/^\.\/locale$/, [/moment$/]), //ignore locale files moment.js, saves 300k         new webpack.defineplugin({             'process.env': {                 'node_env': json.stringify('production')             },             '__devtools__': false         }),         new webpack.optimize.uglifyjsplugin({             compressor: {                 warnings: false             },             mangle: false         })     ] } 

you won't need of stuff in there, want show big picture looks in place. pay attention output, loaders , plugins

check out html-webpack-plugin webpack dynamically build index.html file , place in given folder.