upgrade webpack

Author: jtbandes

package.json

@@ -57,51 +57,47 @@
     "@types/chai": "^4.3.0",
     "@types/classnames": "^2.3.1",
     "@types/dom4": "^2.0.2",
-    "@types/html-webpack-plugin": "2.30.2",
     "@types/lodash": "^4.14.180",
     "@types/mocha": "^5.2.7",
     "@types/prop-types": "^15.7.4",
     "@types/react": "^18.0.15",
-    "@types/react-dnd-multi-backend": "^6.0.2",
     "@types/react-dom": "^18.0.6",
-    "@types/react-hot-loader": "^3.0.6",
+    "@types/react-hot-loader": "^4.1.1",
     "@types/uuid": "^3.4.10",
-    "@types/webpack": "^3.8.21",
+    "@types/webpack": "^5.28.0",
     "chai": "^4.3.6",
-    "css-loader": "^0.28.11",
+    "css-loader": "^6.7.3",
     "dnd-core": "16.0.1",
-    "file-loader": "^1.1.11",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^2.30.1",
+    "file-loader": "^6.2.0",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "jsdom": "^15.2.1",
     "jsdom-global": "^3.0.2",
     "less": "^3.13.1",
-    "less-loader": "^5.0.0",
+    "less-loader": "^11.1.0",
     "less-plugin-autoprefix": "^2.0.0",
     "mocha": "^7.2.0",
     "mocha-junit-reporter": "^1.23.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hot-loader": "^3.1.3",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^0.20.3",
-    "ts-loader": "^3.5.0",
+    "react-hot-loader": "^4.13.1",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.4.2",
     "ts-node": "^8.10.2",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.3.0",
     "tslint-react": "^5.0.0",
     "typescript": "^4.6.3",
-    "webpack": "^3.12.0",
-    "webpack-dev-server": "^2.11.5",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
     "yarn-deduplicate": "^3.1.0"
   },
   "peerDependencies": {
     "react": "16 - 18"
-  },
-  "resolutions": {
-    "dnd-core": "16.0.1"
   }
 }

webpack/base.ts

@@ -14,10 +14,13 @@ const config: webpack.Configuration = {
     filename: '[name].js',
     path: CONSTANTS.DOCS_DIR,
   },
-  devtool: '#source-map',
+  devtool: 'source-map',
   resolve: {
     extensions: ['.webpack.js', '.web.js', '.json', '.ts', '.js', '.tsx'],
   },
+  optimization: {
+    moduleIds: 'named'
+  },
   module: {
     rules: [
       {
@@ -74,14 +77,8 @@ const config: webpack.Configuration = {
     ],
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: Infinity,
-    }),
     new HtmlWebpackPlugin({
       template: CONSTANTS.HTML_TEMPLATE,
-      chunksSortMode: 'dependency',
     }),
   ],
 };

webpack/bundle.ts

@@ -1,8 +1,12 @@
 import webpack from 'webpack';
 import config from './base';
 
-const bundleConfig = {
+const bundleConfig: webpack.Configuration = {
   ...config,
+  optimization: {
+    ...config.optimization,
+    minimize: true,
+  },
   plugins: [
     ...(config.plugins || []),
     new webpack.DefinePlugin({
@@ -12,9 +16,6 @@ const bundleConfig = {
     new webpack.LoaderOptionsPlugin({
       minimize: true,
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-    }),
   ],
 };
 

webpack/hot.ts

@@ -1,8 +1,9 @@
 import webpack from 'webpack';
 import config from './base';
 import { CONSTANTS } from './constants';
+import 'webpack-dev-server';
 
-const baseEntry = config.entry as webpack.Entry;
+const baseEntry = config.entry as webpack.EntryObject;
 const entry = {
   ...baseEntry,
   app: [
@@ -20,7 +21,7 @@ const entry = {
   ],
 };
 
-const rules = (config.module as webpack.NewModule).rules.map((loaderConf: any) => {
+const rules = (config.module as webpack.ModuleOptions).rules?.map((loaderConf: any) => {
   if (loaderConf.test.test('test.ts')) {
     return {
       ...loaderConf,
@@ -40,25 +41,20 @@ const module = {
   rules,
 };
 
-const plugins = [
-  ...(config.plugins || []),
-  new webpack.DefinePlugin({
-    'process.env.NODE_ENV': 'null',
-  }),
-  new webpack.HotModuleReplacementPlugin(),
-];
-
-const hotConfig = {
+const hotConfig: webpack.Configuration = {
   ...config,
+  mode: 'development',
   entry,
   module,
-  plugins,
-  devtool: '#cheap-module-source-map',
+  devtool: 'cheap-module-source-map',
+  stats: 'minimal',
+  optimization: {
+    runtimeChunk: 'single',
+  },
   devServer: {
-    contentBase: CONSTANTS.DOCS_DIR,
+    static: CONSTANTS.DOCS_DIR,
     historyApiFallback: true,
     hot: true,
-    stats: 'minimal',
     host: '0.0.0.0',
     port: CONSTANTS.DEV_SERVER_PORT,
     open: true,