Using ExtractTextPlugin with WebPack 2.2.0 RC3 throws errors - angularjs

Question

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.
I started from the following, working, setup:
module: {
...
loaders: [{
test: /\.(css|less)$/,
loaders: ExtractTextPlugin.extract('style', 'css!postcss!less')
}]
...
}
,
plugins: [
new ExtractTextPlugin('styles/index-[contenthash].css')
]
The versions used in my package.json for this are:
"css-loader": "^0.23.1"
"less-loader": "^2.2.2"
"postcss-loader": "^0.9.1"
"style-loader": "^0.13.0",
"extract-text-webpack-plugin": "^1.0.1"
"webpack": "2.1.0-beta.8"
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:
module: {
...
rules: [{
test: /\.(css|less)$/,
use: ExtractTextPlugin.extract(['css', 'postcss', 'less'])
}]
...
}
,
plugins: [
new ExtractTextPlugin('styles/index-[contenthash].css')
]
This configuration uses the following versions:
"css-loader": "^0.26.1"
"less-loader": "^2.2.3"
"postcss-loader": "^1.2.1"
"style-loader": "^0.13.1"
"extract-text-webpack-plugin": "2.0.0-beta.4"
"webpack": "2.2.0-rc.3"
The above configuration results in the following exceptions:
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 / | | #import
'./index.vendor.less'; | | / 2. Import general styles */ #
./src/index.ts 24:0-23 # multi app
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";
|
| /*!
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;
}
Apart from the above loader configuration, I also tried the following configuration but it didn't work neither:
use: ExtractTextPlugin.extract(['style-loader', 'css-loader', 'postcss-loader','less-loader'])
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader!less-loader"
})
I've removed my node_modules folder and installed everything from scratch, but this didn't help.
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!
{
test: /\.(css|less)$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'less-loader'
]
}
I've uploaded a sample to reproduce the issue: https://dl.dropboxusercontent.com/u/87239305/webpack-less.zip
Steps to reproduce:
npm install
node_modules\ .bin\webpack.cmd --config
conf\webpack.conf.js
I've also added a second config file which is working, without ExtractTextPlugin:
node_modules\ .bin\webpack.cmd --config conf\webpack.conf2.js
Any guidance in what I'm missing here is appreciated!
Thanks in advance.

Answer 1

It appeared to be an issue with ExtractWebpackPlugin and should have been fixed with the latest release: https://github.com/webpack/extract-text-webpack-plugin/releases/tag/v2.0.0-beta.5.
I verified my reproduce app mentioned above is working when upgrading ETP to beta5 using the following syntax in my webpack.config file:
{
test: /\.(css|less)$/,
loader: ExtractTextPlugin.extract(["css-loader", "postcss-loader", "less-loader"])
}
Aswell as using the following syntax
{
test: /\.(css|less)$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: ["css-loader", "postcss-loader", "less-loader"]
})
},