chore(deps-dev): bump webpack from 4.46.0 to 5.39.0

.github/workflows/ci.yml

@@ -28,6 +28,12 @@ jobs:
     - name: Run visual regression tests
       run: CI=true npm run test.browser
 
+    - uses: actions/upload-artifact@v2
+      if: ${{ failure() }}
+      with:
+        name: image-diffs
+        path: __tests__/browser/ci/__diff_output__
+
     - name: Update regression test snapshots
       if: ${{ failure() }}
       run: npm run test.browser -- -u

package.json

@@ -11,9 +11,9 @@
     "dist"
   ],
   "scripts": {
-    "build": "webpack -p",
-    "heroku-postbuild": "make emojis && webpack -p --config ./webpack.dev.js",
-    "start": "webpack-dev-server --config ./webpack.dev.js --open",
+    "build": "webpack --mode production",
+    "heroku-postbuild": "make emojis && webpack --mode production --config ./webpack.dev.js",
+    "start": "webpack serve --config ./webpack.dev.js --open --mode development",
     "lint": "eslint . --ext .jsx --ext .js",
     "pretest": "npm run lint",
     "prettier": "prettier --list-different --write \"./**/**.{js,jsx}\"",
@@ -34,6 +34,8 @@
     "hast-util-to-string": "^1.0.3",
     "lodash.kebabcase": "^4.1.1",
     "mdast-util-toc": "^5.1.0",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "rehype-raw": "^4.0.1",
     "rehype-react": "^6.2.1",
@@ -86,22 +88,21 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-image-snapshot": "^4.2.0",
-    "jest-puppeteer": "^4.4.0",
+    "jest-puppeteer": "^5.0.4",
     "mini-css-extract-plugin": "^1.3.6",
-    "node-sass": "^5.0.0",
+    "node-sass": "^6.0.0",
     "prettier": "^2.2.1",
-    "puppeteer": "^5.5.0",
-    "raw-loader": "^4.0.2",
+    "puppeteer": "^9.1.1",
     "rdme": "^3.8.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-hot-loader": "^4.13.0",
     "regenerator-runtime": "^0.13.7",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^12.1.0",
     "semantic-release": "^17.3.8",
     "terser-webpack-plugin": "^5.1.1",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.9",
+    "webpack": "^5.39.0",
+    "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2",
     "webpack-merge": "^5.7.3"
   },

webpack.common.js

@@ -27,21 +27,26 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        loaders: [ExtractCSS.loader, 'css-loader'],
+        use: [ExtractCSS.loader, 'css-loader'],
       },
       {
         test: /\.scss$/,
-        loaders: [ExtractCSS.loader, 'css-loader', 'sass-loader'],
+        use: [ExtractCSS.loader, 'css-loader', 'sass-loader'],
       },
       {
         // eslint-disable-next-line unicorn/no-unsafe-regex
         test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
-        loader: 'file-loader?name=dist/fonts/[hash].[ext]',
         exclude: /(node_modules)/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: 'dist/fons/[hash].[ext]',
+          },
+        },
       },
       {
         test: /\.(txt|md)$/i,
-        use: 'raw-loader',
+        type: 'asset/source',
       },
     ],
   },

webpack.config.js

@@ -1,4 +1,3 @@
-const path = require('path');
 const { merge } = require('webpack-merge');
 const TerserPlugin = require('terser-webpack-plugin');
 
@@ -24,14 +23,15 @@ const browserConfig = merge(common, {
     },
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js',
     libraryTarget: 'commonjs2',
   },
   optimization: {
     minimize: false,
     minimizer: [new TerserPlugin()],
   },
+  resolve: {
+    fallback: { path: require.resolve('path-browserify') },
+  },
 });
 
 const serverConfig = merge(browserConfig, {

webpack.dev.js

@@ -3,6 +3,7 @@
 const path = require('path');
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common');
+const webpack = require('webpack');
 
 const config = merge(common, {
   entry: {
@@ -20,10 +21,16 @@ const config = merge(common, {
     hot: true,
     watchContentBase: true,
   },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+  ],
   resolve: {
     alias: {
       'react-dom': '@hot-loader/react-dom',
     },
+    fallback: { path: require.resolve('path-browserify') },
   },
 });