Upgrade webpack from v4 to v5 (#734)

Author: pradeepnschrodinger

package.json

@@ -43,13 +43,11 @@
     "babel-loader": "^8.2.2",
     "babel-plugin-rewire": "1.2.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.8.0",
-    "bundle-loader": "0.5.6",
     "css-loader": "^5.2.7",
     "eslint": "7",
     "eslint-config-prettier": "6.10.0",
     "except": "^0.1.3",
     "faker": "^5.5.3",
-    "file-loader": "4.2.0",
     "glob": "7.1.4",
     "global": "^4.4.0",
     "html-loader": "0.5.5",
@@ -77,8 +75,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "style-loader": "1.0.0",
     "terser-webpack-plugin": "4.2.3",
-    "url-loader": "2.1.0",
-    "webpack": "^4.39.3",
+    "webpack": "^5.94.0",
     "webpack-cli": "^4.3.0",
     "webpack-dev-server": "^4.7.4"
   },

site/webpack-client.config.js

@@ -3,7 +3,8 @@ const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 
-const isDev = process.env.NODE_ENV !== 'production';
+const nodeEnv = process.env.NODE_ENV ?? 'development';
+const isDev = nodeEnv !== 'production';
 
 module.exports = {
   mode: isDev ? 'development' : 'production',
@@ -14,7 +15,7 @@ module.exports = {
 
   output: {
     path: path.resolve(__dirname, '../__site__/'),
-    filename: isDev ? '[name].js' : '[name]-[hash].js',
+    filename: isDev ? '[name].js' : '[name]-[contentHash].js',
     publicPath: '',
   },
 
@@ -24,10 +25,15 @@ module.exports = {
     rules: [
       {
         test: /\.md$/,
-        loader: [
-          'html-loader?{"minimize":false}',
+        use: [
+          {
+            loader: 'html-loader',
+            options: {
+              minimize: false,
+            },
+          },
           path.join(__dirname, '../build_helpers/markdownLoader'),
-        ].join('!'),
+        ],
       },
       {
         test: /\.js$/,
@@ -63,8 +69,10 @@ module.exports = {
       },
       {
         test: /\.png$/,
-        loader: 'file-loader',
-        query: { mimetype: 'image/png', name: 'images/[name]-[hash].[ext]' },
+        type: 'asset/resource',
+        generator: {
+          filename: 'images/[name]-[contentHash].[ext]',
+        },
       },
     ],
   },
@@ -74,6 +82,9 @@ module.exports = {
       'fixed-data-table-2/css': path.join(__dirname, '../src/css'),
       'fixed-data-table-2': path.join(__dirname, '../src/index'),
     },
+    fallback: {
+      url: false,
+    },
   },
 
   devServer: {
@@ -83,10 +94,10 @@ module.exports = {
 
   plugins: [
     new MiniCssExtractPlugin({
-      filename: isDev ? '[name].css' : '[name]-[hash].css',
+      filename: isDev ? '[name].css' : '[name]-[contentHash].css',
     }),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      'process.env.NODE_ENV': JSON.stringify(nodeEnv),
       // 'process.env.NODE_ENV': JSON.stringify('production'),
       __DEV__: isDev,
     }),

site/webpack-prerender.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 
+const nodeEnv = process.env.NODE_ENV ?? 'development';
 const isDev = process.env.NODE_ENV !== 'production';
 
 module.exports = {
@@ -12,7 +13,9 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, '../__site_prerender__/'),
     filename: 'renderPath.js',
-    libraryTarget: 'commonjs2',
+    library: {
+      type: 'commonjs2',
+    },
   },
 
   target: 'node',
@@ -21,10 +24,15 @@ module.exports = {
     rules: [
       {
         test: /\.md$/,
-        loader: [
-          'html-loader?{"minimize":false}',
+        use: [
+          {
+            loader: 'html-loader',
+            options: {
+              minimize: false,
+            },
+          },
           path.join(__dirname, '../build_helpers/markdownLoader'),
-        ].join('!'),
+        ],
       },
       {
         test: /\.js$/,
@@ -41,8 +49,10 @@ module.exports = {
       },
       {
         test: /\.png$/,
-        loader: 'file-loader',
-        query: { mimetype: 'image/png', name: 'images/[name]-[hash].[ext]' },
+        type: 'asset/resource',
+        generator: {
+          filename: 'images/[name]-[contentHash].[ext]',
+        },
       },
     ],
   },
@@ -52,11 +62,14 @@ module.exports = {
       'fixed-data-table-2/css': path.join(__dirname, '../src/css'),
       'fixed-data-table-2': path.join(__dirname, '../src/index'),
     },
+    fallback: {
+      url: false,
+    },
   },
 
   plugins: [
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      'process.env.NODE_ENV': JSON.stringify(nodeEnv),
       __DEV__: isDev,
     }),
   ],