upgrade: Webpack 5

This is a work in progress to try upgrading to webpack 5.
artsy · Oct 16, 2020 · 07db8a8 · 07db8a8
1 parent f87ce33
commit 07db8a8
Show file tree

Hide file tree

Showing 6 changed files with 2,048 additions and 1,238 deletions.
diff --git a/package.json b/package.json
@@ -267,8 +267,7 @@
     "@types/styled-system": "5.1.9",
     "@types/styled-system__theme-get": "5.0.0",
     "@types/underscore.string": "0.0.32",
-    "@types/webpack": "4.4.24",
-    "@types/webpack-env": "1.13.6",
+    "@types/webpack-env": "^1.15.3",
     "@typescript-eslint/eslint-plugin": "2.30.0",
     "@typescript-eslint/parser": "2.30.0",
     "babel-jest": "24.8.0",
@@ -280,7 +279,6 @@
     "babel-plugin-styled-components": "1.11.1",
     "benv": "3.3.0",
     "cache-loader": "1.2.2",
-    "case-sensitive-paths-webpack-plugin": "2.3.0",
     "coffee-loader": "0.8.0",
     "coffeescript": "1.11.1",
     "cypress": "5.1.0",
@@ -294,9 +292,7 @@
     "eslint-plugin-react": "7.19.0",
     "eslint-plugin-react-hooks": "4.0.4",
     "eslint-plugin-styled-components-a11y": "0.0.16",
-    "fork-ts-checker-notifier-webpack-plugin": "0.4.0",
     "fork-ts-checker-webpack-plugin": "0.4.10",
-    "friendly-errors-webpack-plugin": "1.6.1",
     "graphql-tag": "2.10.3",
     "graphql-tools": "4.0.3",
     "hulk-editor": "craigspaeth/hulk",
@@ -334,27 +330,26 @@
     "relay-test-utils": "9.1.0",
     "rewire": "2.2.0",
     "should": "11.2.1",
-    "simple-progress-webpack-plugin": "1.1.2",
     "sinon": "1.17.7",
     "speed-measure-webpack-plugin": "1.3.3",
     "static-extend": "0.1.2",
     "strip-ansi": "5.0.0",
     "style-loader": "0.23.1",
     "stylus-loader": "3.0.2",
     "supertest": "2.0.1",
-    "terser-webpack-plugin": "4.1.0",
+    "terser-webpack-plugin": "5.0.0",
     "typescript": "3.9.7",
     "typescript-styled-plugin": "0.15.0",
     "vscode-apollo-relay": "1.5.1",
-    "webpack": "4.44.1",
-    "webpack-bundle-analyzer": "3.6.0",
-    "webpack-cli": "3.3.12",
+    "webpack": "5.1.3",
+    "webpack-bundle-analyzer": "3.9.0",
+    "webpack-cli": "4.0.0",
     "webpack-config-utils": "2.3.1",
-    "webpack-dev-middleware": "3.5.1",
-    "webpack-hot-middleware": "2.24.3",
-    "webpack-manifest-plugin": "2.0.4",
+    "webpack-dev-middleware": "3.7.2",
+    "webpack-hot-middleware": "2.25.0",
+    "webpack-manifest-plugin": "^2.2.0",
     "webpack-merge": "4.2.1",
-    "webpack-node-externals": "1.7.2",
+    "webpack-node-externals": "2.5.2",
     "webpack-notifier": "1.7.0",
     "webpack-retry-chunk-load-plugin": "1.2.0",
     "yn": "4.0.0"

diff --git a/webpack/envs/clientCommonConfig.js b/webpack/envs/clientCommonConfig.js
@@ -75,20 +75,12 @@ export const clientCommonConfig = {
       },
     }),
     // Remove moment.js localization files
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/ }),
+    new webpack.IgnorePlugin({ resourceRegExp: /moment$/ }),
     // Remove server-only modules from client bundles
-    ...[
-      // Remove server side of relay network layer.
-      new webpack.IgnorePlugin(
-        /^react-relay-network-modern-ssr\/node8\/server/
-      ),
-      // No matter what, we don't want the graphql-js package in client
-      // bundles. This /may/ lead to a broken build when e.g. a reaction
-      // module that's used on the client side imports something from
-      // graphql-js, but that's better than silently including this.
-      new webpack.IgnorePlugin(/^graphql(\/.*)?$/),
-    ],
-    new webpack.NamedModulesPlugin(),
+    // TODO: Why would these end up in the client bundle?
+    new webpack.IgnorePlugin({ resourceRegExp: /^react-relay-network-modern-ssr\/node8\/server/ }),
+    new webpack.IgnorePlugin({ resourceRegExp: /^graphql(\/.*)?$/ }),
     new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery",

diff --git a/webpack/envs/clientDevelopmentConfig.js b/webpack/envs/clientDevelopmentConfig.js
@@ -4,12 +4,8 @@ const chalk = require("chalk")
 const fs = require("fs")
 const path = require("path")
 const webpack = require("webpack")
-const ForkTsCheckerNotifierWebpackPlugin = require("fork-ts-checker-notifier-webpack-plugin")
 const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin")
-const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin")
 const WebpackNotifierPlugin = require("webpack-notifier")
-const SimpleProgressWebpackPlugin = require("simple-progress-webpack-plugin")
-const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin")
 const { basePath, env } = require("../utils/env")
 
 const cacheDirectory = path.resolve(basePath, ".cache")
@@ -18,7 +14,7 @@ if (!env.onCi && !fs.existsSync(cacheDirectory)) {
   console.log(
     chalk.yellow(
       "\n[!] No existing `.cache` directory detected, initial " +
-        "launch will take a while.\n"
+      "launch will take a while.\n"
     )
   )
 }
@@ -56,29 +52,13 @@ export const clientDevelopmentConfig = {
     ],
   },
   plugins: [
-    new CaseSensitivePathsPlugin(),
     new webpack.HotModuleReplacementPlugin(),
-    // @ts-ignore
-    new SimpleProgressWebpackPlugin({
-      format: "compact",
-    }),
     new ForkTsCheckerWebpackPlugin({
       formatter: "codeframe",
       formatterOptions: "highlightCode",
       checkSyntacticErrors: true,
       watch: ["./src"],
     }),
-    new ForkTsCheckerNotifierWebpackPlugin({
-      excludeWarnings: true,
-      skipFirstNotification: true,
-    }),
-    new FriendlyErrorsWebpackPlugin({
-      clearConsole: false,
-      compilationSuccessInfo: {
-        messages: [`[Force] Listening on http://localhost:${env.port} \n`],
-        notes: [""],
-      },
-    }),
     new WebpackNotifierPlugin(),
   ],
 }
diff --git a/webpack/envs/clientProductionConfig.js b/webpack/envs/clientProductionConfig.js
@@ -2,7 +2,7 @@
 
 const path = require("path")
 const WebpackManifestPlugin = require("webpack-manifest-plugin")
-const { HashedModuleIdsPlugin } = require("webpack")
+const webpack = require("webpack")
 const { getCSSManifest } = require("../utils/getCSSManifest")
 const TerserPlugin = require("terser-webpack-plugin")
 const { basePath, env } = require("../utils/env")
@@ -18,7 +18,7 @@ export const clientProductionConfig = {
     // @see: https://github.com/artsy/force/blob/master/src/desktop/lib/global_client_setup.tsx#L7
   },
   plugins: [
-    new HashedModuleIdsPlugin(),
+    new webpack.ids.HashedModuleIdsPlugin(),
     new WebpackManifestPlugin({
       fileName: path.resolve(basePath, "manifest.json"),
       basePath: "/assets/",
@@ -29,9 +29,7 @@ export const clientProductionConfig = {
     minimize: !env.webpackDebug,
     minimizer: [
       new TerserPlugin({
-        cache: false,
         parallel: env.onCi ? env.webpackCiCpuLimit : true, // Only use 4 cpus (default) in CircleCI, by default it will try using 36 and OOM
-        sourceMap: true, // Must be set to true if using source-maps in production
       }),
     ],
   },

diff --git a/webpack/envs/serverConfig.js b/webpack/envs/serverConfig.js
@@ -62,18 +62,16 @@ export const serverConfig = {
     minimize: env.isProduction && !env.webpackDebug,
     minimizer: [
       new TerserPlugin({
-        cache: false,
         parallel: env.onCi ? env.webpackCiCpuLimit : true, // Only use 4 cpus (default) in CircleCI, by default it will try using 36 and OOM
-        sourceMap: true, // Must be set to true if using source-maps in production
       }),
     ],
   },
   plugins: removeEmpty([
     env.enableWebpackAnalyze
       ? undefined
       : new webpack.optimize.LimitChunkCountPlugin({
-          maxChunks: 1,
-        }),
+        maxChunks: 1,
+      }),
   ]),
   resolve: {
     extensions: [".js", ".jsx", ".ts", ".tsx", ".json", ".coffee"],