title: Configure webpack to output images/fonts in a separate subfolders
body: <p>I managed configure webpack to output CSS and JS into respective sub-directories, i.e. <code>public/asests/css</code> and <code>public/assets/js</code>. However, I don't know how to do the same for images and fonts.</p>
  
  <p>In other words, I want to output images in <code>public/assets/images</code> folder and fonts into <code>public/assets/fonts</code> folder. </p>
  
  <p>Here's my webpack config file:</p>
  
  <pre><code>var path = require('path');
  var ExtractCSS = require('extract-text-webpack-plugin');
  
  module.exports = {
      context: path.resolve('private/js'),
      resolve: ['', '.js', '.jsx', '.es6', '.json'],
      entry: {
          homepage: './homepage'
      },
      output: {
          path: path.resolve('public/assets'),
          publicPath: '/public/assets/',
          filename: 'js/[name].js'
      },
      plugins: [
          new ExtractCSS('css/[name].css')
      ],
      devServer: {
          contentBase: 'public'
      },
      module: {
          loaders: [
              {
                  test: /\.(es6|js|jsx)$/,
                  exclude: /node_modules/,
                  loader: 'babel-loader'
              },
              {
                  test: /\.css$/,
                  exclude: /node_modules/,
                  loader: ExtractCSS.extract('style-loader', 'css-loader')
              },
              {
                  test: /\.less$/,
                  exclude: /node_modules/,
                  loader: ExtractCSS.extract('style-loader', 'css-loader!less-loader')
              },
              {
                  test: /\.(jpg|jpeg|gif|png|woff|woff2|eot|ttf|svg)$/,
                  exclude: /node_modules/,
                  loader: 'url-loader?limit=1024'
              }
          ]
      }
  }
  </code></pre>