I use Webpack for an Angular application. After migration to 4 version of the bundler file style.css (created by ExtractTextPlugin
) is empty (i.e. has no any content excepting the only string /*# sourceMappingURL=styles.css.map*/
)
// webpack.config.js
module.exports = {
devtool: 'source-map',
entry: {
'polyfills': './src/js/polyfills.ts',
'vendor': './src/js/vendor.ts',
'app': './src/js/main.ts'
},
output: {
path: 'wwwroot/js',
publicPath: '/app/',
filename: 'js/[name].js',
chunkFilename: 'js/[id].[hash].chunk.js'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loaders:
[
{
loader: 'awesome-typescript-loader',
options: { configFileName: helpers.root('src', 'tsconfig.app.json') }
},
'angular2-template-loader'
]
},
{
test: /\.(ts|js)$/,
loader: 'angular-router-loader'
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract({ fallback: 'style-loader?singleton=true', use: 'css-loader?minimize=true' })
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw-loader'
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)@angular/,
helpers.root('./src'),
{}
),
new ExtractTextPlugin('css/styles.css'),
new webpack.LoaderOptionsPlugin({
htmlLoader: {
minimize: false
}
}),
new HtmlWebpackPlugin({})
]
};
Also I changed the following things in the configuration file compared to the one for version 3:
- remove
CommonsChunkPlugin
- remove
UglifyJsPlugin
- update
ExtractTextPlugin
to 4.0.0-beta.0
That's all. No issues with the version 3 here
Update: it seems there is the opened issue for ExtractTextPlugin
v. 4.0.0-beta.0