Client: Upgrade to Webpack 5

winwiz1 · Dec 13, 2020 · a7b97b1 · a7b97b1
1 parent 52af6a3
commit a7b97b1
Show file tree

Hide file tree

Showing 3 changed files with 654 additions and 1,407 deletions.
diff --git a/client/package.json b/client/package.json
@@ -27,7 +27,7 @@
   "scripts": {
     "build": "webpack",
     "postbuild": "yarn prettier",
-    "build:prod": "webpack --env.prod",
+    "build:prod": "webpack --env prod",
     "postbuild:prod": "cross-env TS_NODE_PROJECT=tsconfig.ssr.json node -r ts-node/register -r tsconfig-paths/register src/utils/ssr/buildTimeSSR.ts && yarn prettier",
     "compile": "tsc -p .",
     "lint": "eslint . --ext .ts,.tsx",
@@ -62,29 +62,29 @@
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.4.0",
     "clean-webpack-plugin": "3.0.0",
-    "compression-webpack-plugin": "6.0.3",
+    "compression-webpack-plugin": "7.0.0",
     "copyfiles": "^2.4.0",
     "cross-env": "^7.0.2",
-    "css-loader": "5.0.0",
+    "css-loader": "5.0.1",
     "eslint": "^7.11.0",
-    "fork-ts-checker-webpack-plugin": "5.2.0",
+    "fork-ts-checker-webpack-plugin": "6.0.6",
     "html-webpack-harddisk-plugin": "1.0.2",
     "html-webpack-plugin": "4.5.0",
     "html-webpack-template": "6.2.0",
     "jest": "^26.6.0",
     "mkdirp": "^1.0.4",
     "prettier": "^2.1.2",
     "rimraf": "^3.0.2",
-    "style-loader": "1.3.0",
+    "style-loader": "2.0.0",
     "ts-jest": "^26.4.1",
-    "ts-loader": "8.0.6",
+    "ts-loader": "8.0.12",
     "ts-node": "^9.0.0",
     "tsconfig-paths": "^3.9.0",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
     "tslib": "2.0.3",
-    "typescript": "4.0.3",
-    "webpack": "4.44.2",
-    "webpack-cli": "3.3.12",
+    "typescript": "4.1.3",
+    "webpack": "5.10.1",
+    "webpack-cli": "4.2.0",
     "webpack-dev-server": "^3.11.0",
     "webpack-subresource-integrity": "^1.5.1"
   }

diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -61,8 +61,8 @@ const getWebpackConfig = (env, argv) => {
       ]
     },
     output: {
-      filename: "[name].[hash].bundle.js",
-      chunkFilename: "[name].[hash].bundle.js",
+      filename: "[name].[fullhash].bundle.js",
+      chunkFilename: "[name].[fullhash].bundle.js",
       path: path.resolve(__dirname, "dist"),
       publicPath: "/static/",
       crossOriginLoading: "anonymous",
@@ -82,9 +82,7 @@ const getWebpackConfig = (env, argv) => {
       ...(isProduction && {
         minimizer: [
           new TerserPlugin({
-            cache: false,
             parallel: true,
-            sourceMap: false,         // set to true if debugging of production build needed
             terserOptions: {
               keep_classnames: false,
               mangle: true,
@@ -93,7 +91,8 @@ const getWebpackConfig = (env, argv) => {
               output: {
                 comments: false,
               }
-            }
+            },
+            extractComments: false
           })
         ]
       }),