Build(deps-dev): Bump webpack from 4.44.2 to 5.1.0 (#9373)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: fisker <lionkay@gmail.com>

cspell.json

@@ -336,6 +336,7 @@
         "standalones",
         "Stankiewicz",
         "starturl",
+        "stringifier",
         "stylefmt",
         "styleguides",
         "stylelint",

package.json

@@ -118,6 +118,7 @@
     "jest-snapshot-serializer-raw": "1.1.0",
     "jest-watch-typeahead": "0.6.1",
     "npm-run-all": "4.1.5",
+    "path-browserify": "1.0.1",
     "prettier": "2.1.2",
     "rimraf": "3.0.2",
     "rollup": "2.32.0",
@@ -128,8 +129,8 @@
     "strip-ansi": "6.0.0",
     "synchronous-promise": "2.0.15",
     "tempy": "1.0.0",
-    "terser-webpack-plugin": "4.2.3",
-    "webpack": "4.44.2"
+    "terser-webpack-plugin": "5.0.0",
+    "webpack": "5.1.3"
   },
   "scripts": {
     "prepublishOnly": "echo \"Error: must publish from dist/\" && exit 1",
@@ -147,7 +148,7 @@
     "lint:eslint": "cross-env EFF_NO_LINK_RULES=true eslint . --format friendly",
     "lint:changelog": "node ./scripts/lint-changelog.js",
     "lint:prettier": "prettier . \"!test*\" --check",
-    "lint:dist": "eslint --no-eslintrc --no-ignore --env=es6,browser --parser-options=ecmaVersion:2017 \"dist/!(bin-prettier|index|third-party).js\"",
+    "lint:dist": "eslint --no-eslintrc --no-ignore --env=es6,browser --parser-options=ecmaVersion:2018 \"dist/!(bin-prettier|index|third-party).js\"",
     "lint:spellcheck": "cspell \"**/*\" \".github/**/*\"",
     "lint:deps": "node ./scripts/check-deps.js",
     "fix": "run-s fix:eslint fix:prettier",

scripts/build/build.js

@@ -22,7 +22,7 @@ process.on("unhandledRejection", (err) => {
   process.exit(1);
 });
 
-const CACHE_VERSION = "v31"; // This need update when updating build scripts
+const CACHE_VERSION = "v32"; // This need update when updating build scripts
 const CACHED = chalk.bgYellow.black(" CACHED ");
 const OK = chalk.bgGreen.black("  DONE  ");
 const FAIL = chalk.bgRed.black("  FAIL  ");

scripts/build/bundler.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const path = require("path");
+const fs = require("fs");
 const execa = require("execa");
 const { rollup } = require("rollup");
 const webpack = require("webpack");
@@ -17,7 +18,7 @@ const executable = require("./rollup-plugins/executable");
 const evaluate = require("./rollup-plugins/evaluate");
 const externals = require("./rollup-plugins/externals");
 
-const PROJECT_ROOT = path.resolve(__dirname, "../..");
+const PROJECT_ROOT = path.join(__dirname, "../..");
 
 const EXTERNALS = [
   "assert",
@@ -55,6 +56,15 @@ const entries = [
   },
 ];
 
+const webpackNativeShims = (modules) => {
+  const shims = {};
+  for (const module of modules) {
+    const file = path.join(__dirname, `shims/${module}.mjs`);
+    shims[module] = fs.existsSync(file) ? file : false;
+  }
+  return shims;
+};
+
 function getBabelConfig(bundle) {
   const config = {
     babelrc: false,
@@ -229,6 +239,8 @@ function getWebpackConfig(bundle) {
 
   const root = path.resolve(__dirname, "..", "..");
   const config = {
+    mode: "production",
+    performance: { hints: false },
     entry: path.resolve(root, bundle.input),
     module: {
       rules: [
@@ -249,6 +261,12 @@ function getWebpackConfig(bundle) {
       // https://github.com/webpack/webpack/issues/6642
       globalObject: 'new Function("return this")()',
     },
+    resolve: {
+      // Webpack@5 can't resolve "postcss/lib/parser" and "postcss/lib/stringifier"" imported by `postcss-scss`
+      // Ignore `exports` field to fix bundle script
+      exportsFields: [],
+      fallback: webpackNativeShims(["os", "path", "util", "url"]),
+    },
   };
 
   if (bundle.terserOptions) {
@@ -264,12 +282,26 @@ function getWebpackConfig(bundle) {
 
 function runWebpack(config) {
   return new Promise((resolve, reject) => {
-    webpack(config, (err) => {
-      if (err) {
-        reject(err);
-      } else {
-        resolve();
+    webpack(config, (error, stats) => {
+      if (error) {
+        reject(error);
+        return;
       }
+
+      if (stats.hasErrors()) {
+        const { errors } = stats.toJson();
+        const error = new Error(errors[0].message);
+        error.errors = errors;
+        reject(error);
+        return;
+      }
+
+      if (stats.hasWarnings()) {
+        const { warnings } = stats.toJson();
+        console.warn(warnings);
+      }
+
+      resolve();
     });
   });
 }

scripts/build/shims/path.mjs

@@ -1,18 +1 @@
-const sep = /[/\\]/;
-
-export function extname(path) {
-  const filename = basename(path);
-  const dotIndex = filename.lastIndexOf(".");
-  if (dotIndex === -1) {
-    return "";
-  }
-  return filename.slice(dotIndex);
-}
-
-export function basename(path) {
-  return path.split(sep).pop();
-}
-
-export function isAbsolute() {
-  return true;
-}
+export * from "path-browserify";