Upgrade webpack configuration to webpack v5

Author: julienw

examples/webpack.config.js

@@ -2,14 +2,14 @@
 
 const webpack = require('webpack');
 const path  = require('path');
-const Extract = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MinifyPlugin = require("babel-minify-webpack-plugin");
 
 const PROD = process.env.NODE_ENV === 'production';
 const DEV = !PROD;
 
 const config = {
+    mode: PROD ? "production" : "development",
     entry: ['./examples/index.js'],
     output: {
         filename: DEV ? 'bundle.js' : 'bundle.[hash].js',
@@ -50,19 +50,16 @@ const config = {
             },
             {
                 test: /\.css$/,
-                use: Extract.extract({
-                    fallback: 'style-loader',
-                    use: [{
-                        loader: 'css-loader'
-                    }]
-                }),
+                use: [
+                    DEV ? "style-loader": MiniCssExtractPlugin.loader,
+                    "css-loader"
+                ],
             }
         ]
     },
     plugins: [
-        new Extract({
+        new MiniCssExtractPlugin({
             filename: DEV ? 'styles.css' : 'styles.[contenthash:6].css',
-            allChunks: true
         }),
         new HtmlWebpackPlugin({
             template: 'examples/index.html',
@@ -74,21 +71,4 @@ const config = {
 
 !PROD && (config.devtool = 'source-map');
 
-PROD && config.plugins.push(
-     new webpack.optimize.UglifyJsPlugin({
-        compressor: {
-            warnings: false,
-        }
-    })
-);
-
-PROD && config.plugins.push(
-    new webpack.DefinePlugin({
-        'process.env': {
-            'NODE_ENV': JSON.stringify('production')
-        }
-    }),
-    new MinifyPlugin()
-);
-
 module.exports = config;

package.json

@@ -26,11 +26,11 @@
     "clean": "rimraf ./dist && rimraf ./modules && rimraf ./es6",
     "clean:examples": "rimraf ./public",
     "build": "yarn clean && yarn test && yarn build:dist && yarn build:es5 && yarn build:es6",
-    "build:dist": "webpack --progress --profile --colors",
+    "build:dist": "webpack --progress --profile",
     "build:es5": "cross-env BABEL_ENV=es5 babel src --out-dir modules",
     "build:es6": "cross-env BABEL_ENV=es6 babel src --out-dir es6",
     "build:examples": "yarn clean:examples && yarn build:dev",
-    "build:dev": "cross-env BABEL_ENV=es6 webpack --config examples/webpack.config.js --progress --profile --colors",
+    "build:dev": "cross-env BABEL_ENV=es6 webpack --config examples/webpack.config.js --progress --profile",
     "start": "yarn build:examples && yarn start:server",
     "start:server": "http-server public -p 3000",
     "prepublishOnly": "yarn build"
@@ -64,7 +64,6 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
     "babel-jest": "~27.3.1",
     "babel-loader": "~8.2.3",
-    "babel-minify-webpack-plugin": "~0.3.1",
     "coveralls": "~3.1.1",
     "cross-env": "~7.0.3",
     "css-loader": "~6.5.1",
@@ -75,19 +74,20 @@
     "eslint-import-resolver-webpack": "~0.13.2",
     "eslint-plugin-import": "~2.25.3",
     "eslint-plugin-react": "~7.27.0",
-    "extract-text-webpack-plugin": "~3.0.2",
     "history": "~5.1.0",
     "html-webpack-plugin": "~5.5.0",
     "http-server": "~14.0.0",
     "jest": "~27.3.1",
+    "mini-css-extract-plugin": "^2.4.5",
     "prop-types": "~15.7.2",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
     "react-router-dom": "~6.0.2",
     "react-test-renderer": "~17.0.2",
     "rimraf": "~3.0.0",
     "style-loader": "~3.3.1",
-    "webpack": "~5.64.1"
+    "webpack": "5.64.4",
+    "webpack-cli": "^4.9.1"
   },
   "jest": {
     "setupFiles": [

webpack.config.js

@@ -3,9 +3,9 @@ const webpack = require('webpack');
 const path = require('path');
 
 module.exports = {
-    entry: "./src/index.js",
+    mode: "production",
     output: {
-        filename: "dist/react-contextmenu.js",
+        filename: "react-contextmenu.js",
         libraryTarget: 'umd',
         library: 'ReactContextMenu'
     },
@@ -46,16 +46,4 @@ module.exports = {
             amd: "react-dom"
         }
     }],
-    plugins: [
-        new webpack.DefinePlugin({
-            "process.env": {
-                "NODE_ENV": JSON.stringify("production")
-            }
-        }),
-        new webpack.optimize.UglifyJsPlugin({
-            compressor: {
-                warnings: false
-            }
-        })
-    ]
 };