diff --git a/package.json b/package.json index cf40a9b3..a7fcc1ca 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "zone.js": "^0.8.26" }, "devDependencies": { + "@angular-devkit/build-angular": "~0.6.6", "@angular/cli": "^6.0.5", "@angular/compiler-cli": "6.0.3", "@ngtools/webpack": "^6.0.5", @@ -86,11 +87,10 @@ "karma-remap-coverage": "^0.1.5", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^2.0.4", - "mini-css-extract-plugin": "0.4.0", + "mini-css-extract-plugin": "^0.4.0", "tslint": "^5.10.0", "uglifyjs-webpack-plugin": "^1.2.5", "webpack-bundle-analyzer": "^2.13.1", - "webpack-cli": "^2.1.4", - "@angular-devkit/build-angular": "~0.6.6" + "webpack-cli": "^2.1.4" } } diff --git a/webpack.config.vendor.js b/webpack.config.vendor.js index dd198b09..6b67e525 100644 --- a/webpack.config.vendor.js +++ b/webpack.config.vendor.js @@ -30,6 +30,12 @@ const allModules = treeShakableModules.concat(nonTreeShakableModules); module.exports = (env) => { console.log(`env = ${JSON.stringify(env)}`) + const extractCSS = new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: "[name].css", + chunkFilename: "[id].css" + }); const isDevBuild = !(env && env.prod); const sharedConfig = { mode: isDevBuild ? "development" : "production", @@ -70,7 +76,10 @@ module.exports = (env) => { module: { rules: [{ test: /\.css(\?|$)/, - use: ['style-loader', MiniCssExtractPlugin.loader, isDevBuild ? 'css-loader' : 'css-loader?minimize'] + use: [ + MiniCssExtractPlugin.loader, + isDevBuild ? 'css-loader' : 'css-loader?minimize' + ] }] }, plugins: [ @@ -118,7 +127,10 @@ module.exports = (env) => { module: { rules: [{ test: /\.css(\?|$)/, - use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] + use: [ + MiniCssExtractPlugin.loader, + isDevBuild ? 'css-loader' : 'css-loader?minimize' + ] }] }, plugins: [