title: Webpack output files to different directories
body: <p>After building a project, I have index.html, bundle.js and some .css files, I would like them to be placed in a dir structure like this:</p>
  
  <pre><code>dist/
      - css/all.my.css
      - js/bundle.js
      - index.html
  </code></pre>
  
  <p>Here is what I did for the .js and .css:</p>
  
  <pre class="lang-js prettyprint-override"><code>entry: {
      app: path.resolve(__dirname, 'app/src/index.js'),
  },
  output: {
      path: path.resolve(__dirname, 'dist', 'css'),
      filename: '../js/[name].js'
  },
  </code></pre>
  
  <p>Here are the corresponding module config:</p>
  
  <pre class="lang-js prettyprint-override"><code>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&amp;mimetype=application/font-woff"
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader"
      }]
  },
  </code></pre>
  
  <p>I have no idea how to copy <code>index.html</code> from a folder and put it under dist/. I know <code>file-loader</code> is needed but what should I write under <code>entry</code> and <code>output</code>?</p>
  
  <p>Thanks!</p>
  
  <hr>
  
  <p>I figured it out and here is the solution:</p>
  
  <pre><code>output: {
          path: path.resolve(__dirname, '../dist'),   // this is the output directory, everything will be placed under here
          filename: 'js/bundle.js', // move the bundle.js file under the js/ folder, the dir structure will be like this /dist/js/bundle.js
  }
  </code></pre>
  
  <p>To move the css file under <code>dist/css/</code>:</p>
  
  <pre><code>module: {
      loaders: [{
          test: /\.css$/,
              loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader')
       }]
  }
  </code></pre>
  
  <p>I used the ExtractTextPlugin, so to config the output path of the css file, I had to define it in the <code>plugins</code> section:</p>
  
  <pre><code>plugins: [
      new ExtractTextPlugin('./css/bundle.css'), // bundle.css will be put under /dist/css/
  ]
  </code></pre>
  
  <p>To move images and fonts to their own folder:</p>
  
  <pre><code>module: {
      loaders: [{
          test: /\.(png|jpg|svg)$/,
          loader: 'url-loader?limit=8192&amp;name=img/[name].[ext]'
      }, {
          test: /\.(woff|woff2|eot|ttf)$/,
          loader: 'url-loader?limit=8192&amp;name=fonts/[name].[ext]'
      }]
  }
  </code></pre>
  
  <p>Pay attention to how the <code>loader</code> string is defined: <code>&amp;name=img/[name].[ext]</code> means using the original file's name and extension and put it under the img/ folder. Same goes with the font files. </p>
  
  <p>Here is the complete config file:</p>
  
  <pre><code>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&amp;name=fonts/[name].[ext]'
          },{
              test: /\.(png|jpg|svg)$/,
              loader: 'url-loader?limit=8192&amp;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 from 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
          })
      ]
  }
  </code></pre>
  
  <p>You won't need all of the stuff in there, I just want to show the big picture what it looks like with everything in place. Only pay attention to the <code>output</code>, <code>loaders</code> and <code>plugins</code></p>