[UPGRADED] Webpack to version 5

ifmeorg · Oct 9, 2022 · a8616ff · a8616ff
1 parent 0a4845e
commit a8616ff
Show file tree

Hide file tree

Showing 4 changed files with 694 additions and 126 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -140,7 +140,7 @@ GEM
       railties (>= 5.0.0)
     faraday (0.17.5)
       multipart-post (>= 1.2, < 3)
-    ffi (1.13.1)
+    ffi (1.15.5)
     figaro (1.1.1)
       thor (~> 0.14)
     font-awesome-sass (5.13.0)

diff --git a/client/package.json b/client/package.json
@@ -44,6 +44,7 @@
     "jstimezonedetect": "^1.0.6",
     "location-autocomplete": "^1.2.4",
     "merge": "^2.1.1",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "pell": "^1.0.6",
     "react": "^17.0.2",
     "react-autosuggest": "^10.1.0",
@@ -77,7 +78,7 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-flow-react-proptypes": "^26.0.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "compression-webpack-plugin": "^4.0.0",
+    "compression-webpack-plugin": "^10.0.0",
     "css-loader": "^3.5.3",
     "eslint": "^7.6.0",
     "eslint-config-airbnb": "^18.0.1",
@@ -88,7 +89,7 @@
     "eslint-plugin-jest": "^24.0.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.3",
-    "extract-css-chunks-webpack-plugin": "^4.6.0",
+    "extract-css-chunks-webpack-plugin": "^4.9.0",
     "file-loader": "^6.0.0",
     "flow-bin": "^0.176.1",
     "flow-typed": "^3.8.0",
@@ -104,11 +105,11 @@
     "stylelint": "^13.7.2",
     "stylelint-config-standard": "^20.0.0",
     "surge": "^0.23.1",
-    "terser-webpack-plugin": "^3.0.8",
+    "terser-webpack-plugin": "^5.3.6",
     "url-loader": "^4.0.0",
-    "webpack": "^4.42.0",
+    "webpack": "^5.74.0",
     "webpack-cli": "^3.3.11",
-    "webpack-manifest-plugin": "^2.0.4",
+    "webpack-manifest-plugin": "^5.0.0",
     "yml-loader": "^2.1.0"
   },
   "jest": {

diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -6,16 +6,17 @@ const glob = require('glob');
 const { resolve } = require('path');
 const CompressionPlugin = require('compression-webpack-plugin');
 const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
-const ManifestPlugin = require('webpack-manifest-plugin');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
 const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 
 const configPath = resolve('..', 'config');
 const devOrTestMode = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 const { output } = webpackConfigLoader(configPath);
-const outputFilename = `[name]${devOrTestMode ? '-[hash]' : ''}`;
+const outputFilename = `[name]${devOrTestMode ? '-[contenthash]' : ''}`;
 
 const cssLoaderWithModules = {
   loader: 'css-loader',
@@ -74,9 +75,8 @@ const config = {
       maxAsyncRequests: 5,
       maxInitialRequests: 3,
       automaticNameDelimiter: '~',
-      name: true,
       cacheGroups: {
-        vendors: {
+        defaultVendors: {
           test: /[\\/]node_modules[\\/]/,
           priority: -10,
         },
@@ -96,7 +96,7 @@ const config = {
         },
       }),
       new CompressionPlugin({
-        filename: '[path].gz[query]',
+        filename: '[path][base].gz[query]',
         algorithm: 'gzip',
         test: /\.(js|css|html)$/,
         threshold: 10240,
@@ -112,9 +112,10 @@ const config = {
       chunkFilename: `${outputFilename}.chunk.css`,
       hot: !!devOrTestMode,
     }),
-    new ManifestPlugin({ publicPath: output.publicPath, writeToFileEmit: true }),
+    new WebpackManifestPlugin({ publicPath: output.publicPath, writeToFileEmit: true }),
     // only load moment.js data for locales we support (see config/locale.rb)
     new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en|es|de|it|nb|nl|pt-BR|sv|vi|fr/),
+    new NodePolyfillPlugin(),
   ],
 
   module: {
@@ -195,7 +196,7 @@ const config = {
             loader: 'url-loader',
             options: {
               limit: 8000,
-              name: 'images/[hash]-[name].[ext]',
+              name: 'images/[contenthash]-[name].[ext]',
             },
           },
         ],
@@ -207,7 +208,7 @@ const config = {
           {
             loader: 'file-loader',
             options: {
-              name: 'fonts/[hash]-[name].[ext]',
+              name: 'fonts/[contenthash]-[name].[ext]',
             },
           },
         ],