chore(build): Migrate to Webpack v5

- Migrate works for Webpack v5. - Related plugins/loaders updates and its configurations. Ref #1724
naver · Nov 11, 2020 · 6693eea · 6693eea
1 parent bc56479
commit 6693eea
Show file tree

Hide file tree

Showing 7 changed files with 485 additions and 416 deletions.
diff --git a/config/terserConfig.js b/config/terserConfig.js
@@ -3,16 +3,16 @@ module.exports = {
 	terserOptions: { // https://github.com/terser/terser#minify-options
 		ecma: 5,
 		ie8: false,
+		compress: { // https://github.com/terser/terser#compress-options
+			dead_code: true,
+			unused: true
+		},
 		output: {
 			beautify: false,
 			comments: /^\/*!/,
 		},
-		warnings: false,
-		dead_code: true,
-		unused: true
+		warnings: false
 	},
 	extractComments: false,
-	cache: true,
-	parallel: true,
-	sourceMap: true
+	parallel: true
 };
diff --git a/config/webpack/production.js b/config/webpack/production.js
@@ -5,7 +5,7 @@ const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
 const TerserPlugin = require("terser-webpack-plugin");
 const terserConfig = require("../terserConfig");
 const banner = require("../banner");
-const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const config = {
@@ -43,7 +43,19 @@ const config = {
 	optimization: {
 		usedExports: true,
 		minimize: true,
-		minimizer: [new TerserPlugin(terserConfig)]
+		minimizer: [
+			new TerserPlugin(terserConfig),
+			new CssMinimizerPlugin({
+				test: /\.min\.css$/i,
+				minimizerOptions: {
+					preset: [
+						"default", {
+							discardComments: true
+						}
+					]
+				}
+			})
+		]
 	},
 	plugins: [
 		new CleanWebpackPlugin({
@@ -54,14 +66,6 @@ const config = {
 		new MiniCssExtractPlugin({
 			filename: "[name].css"
 		}),
-		new OptimizeCssAssetsPlugin({
-			assetNameRegExp: /\.min\.css$/,
-			cssProcessorOptions: {
-				discardComments: {
-					removeAll: true
-				}
-			},
-		}),
 		new webpack.BannerPlugin({
 			banner: banner.production,
 			entryOnly: true

diff --git a/config/webpack/theme.js b/config/webpack/theme.js
@@ -5,7 +5,7 @@ const path = require("path");
 const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
 const WebpackCleanPlugin = require("webpack-clean");
 const banner = require("../banner");
-const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const srcPath = "./src/scss/theme/";
@@ -45,6 +45,21 @@ const config = {
 		],
 	},
 	devtool: false,
+	optimization: {
+		minimize: true,
+		minimizer: [
+			new CssMinimizerPlugin({
+				test: /\.min\.css$/i,
+				minimizerOptions: {
+					preset: [
+						"default", {
+							discardComments: true
+						}
+					]
+				}
+			})
+		]
+	},
 	plugins: [
 		// clean before build
 		new CleanWebpackPlugin({
@@ -61,14 +76,6 @@ const config = {
 		new MiniCssExtractPlugin({
 			filename: "[name].css"
 		}),
-		new OptimizeCssAssetsPlugin({
-			assetNameRegExp: /\.min\.css$/,
-			cssProcessorOptions: {
-				discardComments: {
-					removeAll: true
-				}
-			},
-		}),
 		new webpack.BannerPlugin({
 			banner: banner.production,
 			entryOnly: true

diff --git a/karma.conf.js b/karma.conf.js
@@ -6,7 +6,7 @@ const fileExtensions = /(\.[jt]s)$/;
 
 module.exports = function(config) {
 	const karmaConfig = {
-		frameworks: ["mocha", "chai", "sinon"],
+		frameworks: ["mocha", "chai", "sinon", "webpack"],
 		files: [
 			"./node_modules/lite-fixture/index.js",
 			"./node_modules/hammer-simulator/index.js",
@@ -41,7 +41,7 @@ module.exports = function(config) {
 						test: /(\.[jt]s)$/,
 						loader: "babel-loader",
 						exclude: {
-							test: /node_modules/,
+							and: [/node_modules/],
 							not: [/(d3\-.*)$/]
 						}
 					}
@@ -116,7 +116,7 @@ module.exports = function(config) {
 			exclude: /(node_modules|test)/,
 			use: {
 				loader: "istanbul-instrumenter-loader",
-				query: {
+				options: {
 					esModules: true
 				}
 			}

diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
 		"start:plugin": "cross-env PLUGIN=true webpack-dev-server --open",
 		"build": "npm run build:production && npm run build:packaged && npm run build:theme && npm run build:plugin && npm run build:esm",
 		"build:esm": "rollup -c ./config/rollup/esm.js",
-		"build:production": "cross-env NODE_ENV=production webpack --output-reporter",
+		"build:production": "cross-env NODE_ENV=production webpack",
 		"build:packaged": "cross-env NODE_ENV=packaged webpack",
 		"build:dev": "cross-env NODE_ENV=development webpack",
 		"build:theme": "cross-env NODE_ENV=theme webpack",
@@ -131,7 +131,8 @@
 		"core-js": "^3.7.0",
 		"coveralls": "^3.1.0",
 		"cross-env": "^7.0.2",
-		"css-loader": "^4.3.0",
+		"css-loader": "^5.0.1",
+		"css-minimizer-webpack-plugin": "^1.1.5",
 		"d3-format": "^2.0.0",
 		"d3-polygon": "^2.0.0",
 		"d3-voronoi": "^1.1.4",
@@ -157,31 +158,30 @@
 		"karma-scss-preprocessor": "^4.0.0",
 		"karma-sinon": "^1.0.5",
 		"karma-sourcemap-loader": "^0.3.8",
-		"karma-webpack": "^4.0.2",
+		"karma-webpack": "^5.0.0-alpha.3.0",
 		"lite-fixture": "^1.0.2",
 		"mini-css-extract-plugin": "^1.3.0",
 		"mocha": "^8.2.0",
 		"node-sass": "^5.0.0",
-		"optimize-css-assets-webpack-plugin": "^5.0.4",
 		"regenerator-runtime": "^0.13.7",
 		"rollup": "^2.33.1",
 		"sass-loader": "^10.0.5",
 		"semantic-release": "^17.2.1",
 		"simulant": "^0.2.2",
 		"sinon": "^9.2.0",
-		"string-replace-webpack-plugin": "^0.1.3",
+		"string-replace-loader": "^2.3.0",
 		"style-loader": "^2.0.0",
-		"terser-webpack-plugin": "^4.2.3",
+		"terser-webpack-plugin": "^5.0.3",
 		"tslib": "^2.0.3",
 		"typescript": "^4.0.5",
-		"webpack": "^4.44.2",
+		"webpack": "^5.4.0",
 		"webpack-bundle-analyzer": "^4.1.0",
 		"webpack-clean": "^1.2.5",
-		"webpack-cli": "^3.3.12",
+		"webpack-cli": "^4.2.0",
 		"webpack-common-shake": "^2.1.0",
 		"webpack-dev-server": "^3.11.0",
 		"webpack-merge": "^5.2.0",
-		"webpackbar": "^4.0.0",
+		"webpackbar": "^5.0.0-3",
 		"write-file-webpack-plugin": "^4.5.1"
 	}
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,7 +1,6 @@
 const pkg = require("./package.json");
 const path = require("path");
 const webpack = require("webpack");
-const StringReplacePlugin = require("string-replace-webpack-plugin");
 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 const WebpackBar = require("webpackbar");
 
@@ -20,7 +19,7 @@ const config = {
 		umdNamedDefine: true,
 		globalObject: "this"
 	},
-	externals: (context, request, callback) => {
+	externals: ({context, request}, callback) => {
 		// every 'd3-*' import, will be externally required as their name except root as 'd3'
 		if (/^d3-/.test(request)) {
 			return callback(null, {
@@ -43,28 +42,24 @@ const config = {
 				test: /(\.[jt]s)$/,
 				loader: "babel-loader",
 				exclude: {
-					test: /node_modules/,
+					and: [/node_modules/],
 					not: [/(d3\-.*)$/]
 				}
 			},
 			{
 				test: /(\.[jt]s)$/,
-				loader: StringReplacePlugin.replace({
-					replacements: [
-						{
-							pattern: /__VERSION__/ig,
-							replacement: () => pkg.version
-						}
-					]
-				})
+				loader: "string-replace-loader",
+				options: {
+					search: /__VERSION__/ig,
+					replace: pkg.version
+				}
 			}
 		]
 	},
 	optimization: {
 		usedExports: true
 	},
 	plugins: [
-		new StringReplacePlugin(),
 		new webpack.optimize.ModuleConcatenationPlugin(),
 		new WebpackBar()
 	],