title: webpack build less files output one css minify file
body: <p>Is webpack the tool that I need to pass several less files into one minified CSS file?<br>
  if so, I'm not sure what I'm doing wrong in the code below?<br>
  Is there a way of outputting to different file paths, right now my js file outputs to <code>'./assets/javascripts/bundle/'</code>, I would like my css file to output to <code>'./assets/stylesheets/bundle/'</code> , how would I do this?</p>
  
  <p><strong>Update</strong><br>
  I did a test and I can build my less files to one css file but still can't find out how to set multiple paths for the output folder, now I have to comment out the js entry part and change output path...</p>
  
  <p>webpack config</p>
  
  <pre><code>var path = require('path');
  var webpack = require("webpack");
  var ExtractTextPlugin = require("extract-text-webpack-plugin");
  
  module.exports = {
    entry: {
      'MediaIndex':['./assets/javascripts/Media/Index/Base.js'],
      // stylesheets
      'MediaIndexStyleSheet':['./assets/stylesheets/Media/Index/Base.js']
    },
    output: {
      path: './assets/javascripts/bundle/',
      filename: '[name].js'
    },
    resolve: {
      alias: {
        jquery: path.join(__dirname, "assets/javascripts/lib/jquery-1.11.1.min.js"),
        "jquery-ui": path.join(__dirname, "assets/javascripts/lib/jquery-ui.min.js"),
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery"
      }),
      new ExtractTextPlugin("[name].css")
    ],
    module: {
      loaders: [
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        },
        {
          test: /\.less$/,
          loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
        }
      ]
    },
  };
  </code></pre>
  
  <p>assets/stylesheets/Media/Index/Base.js</p>
  
  <pre><code>require('../../../Global/Config.less');
  require('../../../Global/Fp.less');
  require('../../../Global/Urb.less');
  require('../../../Global/Ad1.less');
  require('./Nav0.less');
  require('./Index.less');
  require('./Content.less');
  </code></pre>
  
  <p>Config.less</p>
  
  <pre><code>@color: 'red';
  </code></pre>
  
  <p>Index.less</p>
  
  <pre><code>body {
    background-color: @{color};
  }
  </code></pre>