title: Using ExtractTextPlugin with WebPack 2.2.0 RC3 throws errors
body: <p>I'm trying to upgrade an AngularJS (Angular 1) application using WebPack 2.1.0 beta 8 to WebPack 2.2.0 RC3 but I'm having issues with the ExtractTextPlugin.</p>
  
  <p>I started from the following, working, setup:</p>
  
  <pre><code>module: {
    ...
    loaders: [{
      test: /\.(css|less)$/,
      loaders: ExtractTextPlugin.extract('style', 'css!postcss!less')
    }]
    ...
  }
  ,
  plugins: [
    new ExtractTextPlugin('styles/index-[contenthash].css')
  ]
  </code></pre>
  
  <p>The versions used in my package.json for this are:</p>
  
  <ul>
  <li>"css-loader": "^0.23.1"</li>
  <li>"less-loader": "^2.2.2"</li>
  <li>"postcss-loader": "^0.9.1"</li>
  <li>"style-loader": "^0.13.0",</li>
  <li>"extract-text-webpack-plugin": "^1.0.1"</li>
  <li>"webpack": "2.1.0-beta.8" </li>
  </ul>
  
  <p>My webpack config has a few other loaders and plugins, but I currently am only facing issues with the ExtractTextPlugin. After upgrading my setup, I ended up with the following code:</p>
  
  <pre><code>module: {
    ...
    rules: [{
      test: /\.(css|less)$/,
      use: ExtractTextPlugin.extract(['css', 'postcss', 'less'])
    }]
    ...
  }
  ,
  plugins: [
    new ExtractTextPlugin('styles/index-[contenthash].css')
  ]
  </code></pre>
  
  <p>This configuration uses the following versions:</p>
  
  <ul>
  <li>"css-loader": "^0.26.1"</li>
  <li>"less-loader": "^2.2.3"</li>
  <li>"postcss-loader": "^1.2.1"</li>
  <li>"style-loader": "^0.13.1"</li>
  <li>"extract-text-webpack-plugin": "2.0.0-beta.4"</li>
  <li>"webpack": "2.2.0-rc.3"</li>
  </ul>
  
  <p>The above configuration results in the following exceptions:</p>
  
  <blockquote>
    <p>ERROR in ./src/index.less Module parse failed:
    D:...\node_modules\extract-text-webpack-plugin\loader.js?{"omit":0,"remove":true}!style-loader!css-loader!postcss-loader!less-loader!D:...\src\index.less
    Unexpected character '@' (3:0) You may need an appropriate loader to
    handle this file type. | /* 1. Import vendor styles <em>/ | | @import
    './index.vendor.less'; | | /</em> 2. Import general styles */  @
    ./src/index.ts 24:0-23  @ multi app</p>
    
    <p>ERROR in ./~/animate.css/animate.css
        Module parse failed: D:...\node_modules\animate.css\animate.css
    Unexpected character '@' (1:0)
        You may need an appropriate loader to handle this file type.
        | @charset "UTF-8";
        |
        | /*!</p>
    
    <p>ERROR in
    ./~/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css
        Module parse failed: D:...\node_modules\bootstrap-material-datetimepicker\css\bootstrap-material-datetimepicker.css
    Unexpected token (1:0)
        You may need an appropriate loader to handle this file type.
        | .dtp { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 2000; font-size: 15px;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
        | .dtp > .dtp-content { background: #fff; max-width: 300px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0,
    0, 0.12); max-height: 520px; position: relative; left: 50%; }
        | .dtp > .dtp-content > .dtp-date-view > header.dtp-header { background: #689F38; color: #fff; text-align: center; padding: 0.3em;
    }</p>
  </blockquote>
  
  <p>Apart from the above loader configuration, I also tried the following configuration but it didn't work neither:</p>
  
  <pre><code>use: ExtractTextPlugin.extract(['style-loader', 'css-loader', 'postcss-loader','less-loader'])
  
  use: ExtractTextPlugin.extract({
         fallbackLoader: "style-loader",
         loader: "css-loader!less-loader"
  })
  </code></pre>
  
  <p>I've removed my node_modules folder and installed everything from scratch, but this didn't help.</p>
  
  <p>Note: Removing the ExractTextPlugin configuration and replacing it with the following does allow me to succesfuly build the application, so I'd say the rest of my webpack configuration has been succesfully migrated!</p>
  
  <pre><code>{
      test: /\.(css|less)$/,
      use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader'
      ]
  }
  </code></pre>
  
  <p>I've uploaded a sample to reproduce the issue: <a href="https://dl.dropboxusercontent.com/u/87239305/webpack-less.zip" rel="nofollow noreferrer">https://dl.dropboxusercontent.com/u/87239305/webpack-less.zip</a></p>
  
  <p>Steps to reproduce:</p>
  
  <ul>
  <li>npm install </li>
  <li>node_modules\ .bin\webpack.cmd --config
  conf\webpack.conf.js</li>
  </ul>
  
  <p>I've also added a second config file which is working, without ExtractTextPlugin:</p>
  
  <ul>
  <li>node_modules\ .bin\webpack.cmd --config conf\webpack.conf2.js</li>
  </ul>
  
  <p>Any guidance in what I'm missing here is appreciated!</p>
  
  <p>Thanks in advance.</p>