From 8c3370dd3095847928beb70b3857c79ea361778b Mon Sep 17 00:00:00 2001 From: Robert Grimm Date: Mon, 11 Jun 2018 13:56:24 -0500 Subject: [PATCH] should fix extract-text-webpack-plugin deprecation --- package.json | 5 +++-- webpack.config.vendor.js | 21 +++++++++++++++------ 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 722be23e..1c1c8d60 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,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", @@ -88,10 +89,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", "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 17d2fdb3..eba9a7f8 100644 --- a/webpack.config.vendor.js +++ b/webpack.config.vendor.js @@ -1,6 +1,6 @@ const path = require('path'); const webpack = require('webpack'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const merge = require('webpack-merge'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const treeShakableModules = [ @@ -30,7 +30,12 @@ const allModules = treeShakableModules.concat(nonTreeShakableModules); module.exports = (env) => { console.log(`env = ${JSON.stringify(env)}`) - const extractCSS = new ExtractTextPlugin('vendor.css'); + 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", @@ -71,9 +76,10 @@ module.exports = (env) => { module: { rules: [{ test: /\.css(\?|$)/, - use: extractCSS.extract({ - use: isDevBuild ? 'css-loader' : 'css-loader?minimize' - }) + use: [ + MiniCssExtractPlugin.loader, + isDevBuild ? 'css-loader' : 'css-loader?minimize' + ] }] }, plugins: [ @@ -119,7 +125,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: [