upgrade to webpack 5

package.json

@@ -15,8 +15,8 @@
   "license": "AGPL-3.0",
   "main": "app.js",
   "scripts": {
-    "build": "webpack --config webpack.prod.js --display errors-only -p",
-    "dev": "webpack --config webpack.dev.js --progress --colors --watch",
+    "build": "NODE_ENV=production NODE_DEBUG=false webpack --config webpack.prod.js",
+    "dev": "webpack --config webpack.dev.js --progress --watch",
     "doctoc": "doctoc --title='# Table of Contents' README.md",
     "lint": "standard ./public && eslint --quiet lib/**/*.ts lib/app.ts",
     "jsonlint": "find . -type f -not -ipath \"./node_modules/*\" -not -ipath \"./.vscode/*\" \\( -name \"*.json\" -o -name \"*.json.*\" \\) | xargs -n 1 -I{} -- bash -c 'echo {}; jq . {} > /dev/null;'",
@@ -136,8 +136,9 @@
     "babel-runtime": "~6.26.0",
     "bootstrap": "~3.4.0",
     "bootstrap-validator": "~0.11.8",
-    "copy-webpack-plugin": "~4.5.2",
+    "copy-webpack-plugin": "~9.0.1",
     "css-loader": "~1.0.0",
+    "css-minimizer-webpack-plugin": "~3.0.2",
     "dictionary-de": "^2.0.3",
     "dictionary-de-at": "^2.0.3",
     "dictionary-de-ch": "^2.0.3",
@@ -155,7 +156,7 @@
     "graceful-fs": "~4.2.1",
     "handlebars": "~4.1.2",
     "highlight.js": "~9.15.9",
-    "html-webpack-plugin": "~4.0.0-beta.2",
+    "html-webpack-plugin": "~5.3.2",
     "imports-loader": "~0.8.0",
     "intelli-espower-loader": "~1.0.1",
     "ionicons": "~2.0.1",
@@ -187,11 +188,10 @@
     "markmap-lib": "^0.4.2",
     "mathjax": "~2.7.5",
     "mermaid": "~8.6.4",
-    "mini-css-extract-plugin": "~0.4.1",
+    "mini-css-extract-plugin": "~2.1.0",
     "mocha": "~5.2.0",
     "mock-require": "~3.0.3",
     "nyc": "~14.0.0",
-    "optimize-css-assets-webpack-plugin": "~5.0.0",
     "papaparse": "^5.2.0",
     "pdfobject": "~2.2.4",
     "plantuml-encoder": "^1.2.5",
@@ -212,18 +212,19 @@
     "turndown": "~5.0.3",
     "typescript": "^4.3.2",
     "typo-js": "^1.0.3",
-    "uglifyjs-webpack-plugin": "~1.2.7",
+    "uglifyjs-webpack-plugin": "~2.2.0",
     "url-loader": "~1.0.1",
+    "util": "^0.12.4",
     "vega": "~5.17.1",
     "vega-embed": "~6.14.2",
     "vega-lite": "~4.17.0",
     "velocity-animate": "~1.5.2",
     "visibilityjs": "~2.0.2",
     "viz.js": "~2.1.2",
-    "webpack": "~4.39.0",
-    "webpack-cli": "~3.3.6",
-    "webpack-merge": "~4.2.1",
-    "webpack-parallel-uglify-plugin": "~1.1.0",
+    "webpack": "~5.47.1",
+    "webpack-cli": "~4.7.2",
+    "webpack-merge": "~5.8.0",
+    "webpack-parallel-uglify-plugin": "~2.0.0",
     "wurl": "~2.5.3",
     "xss": "~1.0.6"
   },

webpack.common.js

@@ -12,6 +12,7 @@ gracefulFs.gracefulify(fs)
 module.exports = {
   name: 'app',
   plugins: [
+    new webpack.EnvironmentPlugin(['NODE_ENV', 'NODE_DEBUG']),
     new webpack.ProvidePlugin({
       Visibility: 'visibilityjs',
       Cookies: 'js-cookie',
@@ -129,79 +130,81 @@ module.exports = {
       filename: path.join(__dirname, 'public/views/build/slide-pack-scripts.ejs'),
       inject: false
     }),
-    new CopyWebpackPlugin([
-      {
-        context: path.join(__dirname, 'node_modules/mathjax'),
-        from: {
-          glob: '**/*',
-          dot: false
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          context: path.join(__dirname, 'node_modules/mathjax'),
+          from: '**/*',
+          to: 'MathJax/',
+          globOptions: {
+            dot: false
+          }
         },
-        to: 'MathJax/'
-      },
-      {
-        context: path.join(__dirname, 'node_modules/@hackmd/emojify.js'),
-        from: {
-          glob: 'dist/**/*',
-          dot: false
+        {
+          context: path.join(__dirname, 'node_modules/@hackmd/emojify.js'),
+          from: 'dist/**/*',
+          to: 'emojify.js/',
+          globOptions: {
+            dot: false
+          }
         },
-        to: 'emojify.js/'
-      },
-      {
-        context: path.join(__dirname, 'node_modules/reveal.js'),
-        from: 'js',
-        to: 'reveal.js/js'
-      },
-      {
-        context: path.join(__dirname, 'node_modules/reveal.js'),
-        from: 'css',
-        to: 'reveal.js/css'
-      },
-      {
-        context: path.join(__dirname, 'node_modules/reveal.js'),
-        from: 'lib',
-        to: 'reveal.js/lib'
-      },
-      {
-        context: path.join(__dirname, 'node_modules/reveal.js'),
-        from: 'plugin',
-        to: 'reveal.js/plugin'
-      },
-      {
-        context: path.join(__dirname, 'node_modules/dictionary-de'),
-        from: '*',
-        to: 'dictionary-de/'
-      },
-      {
-        context: path.join(__dirname, 'node_modules/dictionary-de-at'),
-        from: '*',
-        to: 'dictionary-de-at/'
-      },
-      {
-        context: path.join(__dirname, 'node_modules/dictionary-de-ch'),
-        from: '*',
-        to: 'dictionary-de-ch/'
-      },
-      {
-        context: path.join(__dirname, 'node_modules/dictionary-en-gb'),
-        from: '*',
-        to: 'dictionary-en-gb/'
-      },
-      {
-        context: path.join(__dirname, 'node_modules/leaflet'),
-        from: 'dist',
-        to: 'leaflet'
-      },
-      {
-        context: path.join(__dirname, 'node_modules/fork-awesome'),
-        from: 'fonts',
-        to: 'fork-awesome/fonts'
-      },
-      {
-        context: path.join(__dirname, 'node_modules/fork-awesome'),
-        from: 'css',
-        to: 'fork-awesome/css'
-      }
-    ]),
+        {
+          context: path.join(__dirname, 'node_modules/reveal.js'),
+          from: 'js',
+          to: 'reveal.js/js'
+        },
+        {
+          context: path.join(__dirname, 'node_modules/reveal.js'),
+          from: 'css',
+          to: 'reveal.js/css'
+        },
+        {
+          context: path.join(__dirname, 'node_modules/reveal.js'),
+          from: 'lib',
+          to: 'reveal.js/lib'
+        },
+        {
+          context: path.join(__dirname, 'node_modules/reveal.js'),
+          from: 'plugin',
+          to: 'reveal.js/plugin'
+        },
+        {
+          context: path.join(__dirname, 'node_modules/dictionary-de'),
+          from: '*',
+          to: 'dictionary-de/'
+        },
+        {
+          context: path.join(__dirname, 'node_modules/dictionary-de-at'),
+          from: '*',
+          to: 'dictionary-de-at/'
+        },
+        {
+          context: path.join(__dirname, 'node_modules/dictionary-de-ch'),
+          from: '*',
+          to: 'dictionary-de-ch/'
+        },
+        {
+          context: path.join(__dirname, 'node_modules/dictionary-en-gb'),
+          from: '*',
+          to: 'dictionary-en-gb/'
+        },
+        {
+          context: path.join(__dirname, 'node_modules/leaflet'),
+          from: 'dist',
+          to: 'leaflet'
+        },
+        {
+          context: path.join(__dirname, 'node_modules/fork-awesome'),
+          from: 'fonts',
+          to: 'fork-awesome/fonts'
+        },
+        {
+          context: path.join(__dirname, 'node_modules/fork-awesome'),
+          from: 'css',
+          to: 'fork-awesome/css'
+        }
+      ]
+    }),
     new MiniCssExtractPlugin()
   ],
 
@@ -398,8 +401,6 @@ module.exports = {
   },
 
   resolve: {
-    modules: ['node_modules'],
-    extensions: ['.js'],
     alias: {
       codemirror: path.join(__dirname, 'node_modules/@hackmd/codemirror/codemirror.min.js'),
       inlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'),
@@ -423,6 +424,14 @@ module.exports = {
       'viz.js': path.join(__dirname, 'node_modules/viz.js/viz.js'),
       'viz.render.js': path.join(__dirname, 'node_modules/viz.js/full.render.js'),
       markdownlint: path.join(__dirname, 'node_modules/markdownlint/demo/markdownlint-browser.js')
+    },
+    fallback: {
+      "fs": false,
+      "os": false,
+      "path": false,
+      "util": require.resolve("util"),
+      "buffer": false,
+      "process": false
     }
   },
 
@@ -523,13 +532,5 @@ module.exports = {
         loader: 'script-loader'
       }]
     }]
-  },
-  node: {
-    fs: 'empty',
-    os: 'empty'
-  },
-
-  stats: {
-    assets: false
   }
 }

webpack.dev.js

@@ -1,14 +1,14 @@
 const common = require('./webpack.common.js')
 const htmlexport = require('./webpack.htmlexport')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 
 module.exports = [
   // merge common config
   merge(common, {
     mode: 'development',
-    devtool: 'cheap-module-eval-source-map'
+    devtool: 'eval-cheap-module-source-map'
   }),
   merge(htmlexport, {
     mode: 'development',
-    devtool: 'cheap-module-eval-source-map'
+    devtool: 'eval-cheap-module-source-map'
   })]

webpack.htmlexport.js

@@ -6,6 +6,15 @@ module.exports = {
   entry: {
     htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
   },
+  resolve: {
+    fallback: {
+      fs: 'false',
+      os: 'false',
+      buffer: 'false',
+      path: 'false',
+      util: 'false'
+    }
+  },
   module: {
     rules: [{
       test: /\.css$/,

webpack.prod.js

@@ -1,8 +1,8 @@
 const common = require('./webpack.common.js')
 const htmlexport = require('./webpack.htmlexport')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const path = require('path')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 
 module.exports = [
   merge(common, {
@@ -14,10 +14,5 @@ module.exports = [
     }
   }),
   merge(htmlexport, {
-    mode: 'production',
-    optimization: {
-      minimizer: [
-        new OptimizeCSSAssetsPlugin({})
-      ]
-    }
+    mode: 'production'
   })]