feat(webpack5): move to webpack 5, +features, +fixes

vvo · web-flow · commit 16999b76c240 · 2021-02-10T14:54:41.000+01:00
fix(deps): enforce using local (local to aws-lambda-nodejs-webpack) webpack/webpack-cli
binaries
fix(deps): enforce using our local webpack &amp; babel plugins/loaders
feat(deps): upgrade all deps
feat(deps): use webpack 5
perf(build): use webpack caching as much as possible
perf(run): use production mode of webpack
perf(size): separate and minify node_modules into vendor.js, this way you can still
possibly debug main.js in AWS console, as long as your own code is not too big
for AWS console
If you're seeing issues, let me know :)

BREAKING CHANGE: We're now using Webpack 5. If you're seeing anything weird, let
us know.
diff --git a/package.json b/package.json
@@ -43,33 +43,33 @@
     "trailingComma": "all"
   },
   "dependencies": {
-    "@babel/core": "7.10.5",
-    "@babel/plugin-transform-runtime": "7.10.5",
-    "@babel/preset-env": "7.10.4",
-    "babel-loader": "8.1.0",
-    "babel-plugin-source-map-support": "2.1.2",
+    "@babel/core": "7.12.13",
+    "@babel/plugin-transform-runtime": "7.12.15",
+    "@babel/preset-env": "7.12.13",
+    "babel-loader": "8.2.2",
+    "babel-plugin-source-map-support": "2.1.3",
     "cross-spawn": "7.0.3",
     "find-up": "5.0.0",
     "noop2": "2.0.0",
     "source-map-support": "0.5.19",
-    "ts-loader": "8.0.1",
-    "webpack": "4.44.0",
-    "webpack-cli": "3.3.12"
+    "ts-loader": "8.0.16",
+    "webpack": "5.21.2",
+    "webpack-cli": "4.5.0"
   },
   "devDependencies": {
-    "@aws-cdk/aws-lambda": "1.54.0",
-    "@aws-cdk/core": "1.54.0",
+    "@aws-cdk/aws-lambda": "1.89.0",
+    "@aws-cdk/core": "1.89.0",
     "@types/cross-spawn": "6.0.2",
-    "@typescript-eslint/eslint-plugin": "^3.7.1",
-    "@typescript-eslint/parser": "^3.7.1",
-    "eslint-plugin-import": "2.22.0",
-    "eslint-plugin-jest": "23.18.0",
-    "prettier-plugin-packagejson": "2.2.5",
-    "semantic-release": "^17.1.1",
-    "semantic-release-cli": "5.3.1",
-    "tsdx": "0.13.2",
-    "tslib": "2.0.0",
-    "typescript": "3.9.7"
+    "@typescript-eslint/eslint-plugin": "^4.15.0",
+    "@typescript-eslint/parser": "^4.15.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jest": "24.1.3",
+    "prettier-plugin-packagejson": "2.2.9",
+    "semantic-release": "^17.3.8",
+    "semantic-release-cli": "5.4.3",
+    "tsdx": "0.14.1",
+    "tslib": "2.1.0",
+    "typescript": "4.1.4"
   },
   "peerDependencies": {
     "@aws-cdk/aws-lambda": "^1.54.0",
@@ -105,18 +105,23 @@
       "import/order": [
         "error",
         {
-          "newlines-between": "always"
+          "newlines-between": "always",
+          "alphabetize": {
+            "order": "asc"
+          }
         }
       ]
     },
     "settings": {
       "import/extensions": [
-        ".ts"
+        ".ts",
+        ".js"
       ],
       "import/resolver": {
         "node": {
           "extensions": [
-            ".ts"
+            ".ts",
+            ".js"
           ]
         }
       }
diff --git a/src/NodejsFunction.ts b/src/NodejsFunction.ts
@@ -1,12 +1,12 @@
 import * as fs from "fs";
-import * as path from "path";
 import * as os from "os";
+import * as path from "path";
 import * as process from "process";
-import * as spawn from "cross-spawn";
-import findUp from "find-up";
 
 import * as lambda from "@aws-cdk/aws-lambda";
 import * as cdk from "@aws-cdk/core";
+import * as spawn from "cross-spawn";
+import findUp from "find-up";
 
 /**
  * Properties for a NodejsFunction
@@ -95,53 +95,61 @@ export class NodejsFunction extends lambda.Function {
     );
     const webpackConfigPath = path.join(outputDir, "webpack.config.js");
 
-    // The code below is mostly to handle cases where this module is used through
-    // yarn link. I think otherwise just using require.resolve and passing just the babel plugin
-    // names would have worked.
-
-    const webpackBinPath = require.resolve("webpack-cli");
+    const webpackBinPath = require.resolve("webpack-cli/bin/cli.js", {
+      paths: [__dirname],
+    });
 
-    const plugins = [
-      "webpack",
-      "babel-loader",
-      "@babel/preset-env",
-      "@babel/plugin-transform-runtime",
-      "babel-plugin-source-map-support",
-      "noop2",
-    ];
     const pluginsPath = path.join(
       webpackBinPath.slice(0, webpackBinPath.lastIndexOf("/node_modules")),
       "node_modules",
     );
-    const pluginsPaths: any = plugins.reduce(function(acc, pluginName) {
-      return {
-        [pluginName]: findUp.sync(pluginName, {
-          type: "directory",
-          cwd: pluginsPath,
-        }),
-        ...acc,
-      };
-    }, {});
+
+    const pluginsPaths = {
+      webpack: findModulePath("webpack", pluginsPath),
+      "babel-loader": findModulePath("babel-loader", pluginsPath),
+      "@babel/preset-env": findModulePath("@babel/preset-env", pluginsPath),
+      "@babel/plugin-transform-runtime": findModulePath(
+        "@babel/plugin-transform-runtime",
+        pluginsPath,
+      ),
+      "babel-plugin-source-map-support": findModulePath(
+        "babel-plugin-source-map-support",
+        pluginsPath,
+      ),
+      noop2: findModulePath("noop2", pluginsPath),
+      "terser-webpack-plugin": findModulePath(
+        "terser-webpack-plugin",
+        pluginsPath,
+      ),
+    };
 
     // NodeJs reserves '\' as an escape char; but pluginsPaths etc are inlined directly in the
     // TemplateString below, so will contain this escape character on paths computed when running
     // the Construct on a Windows machine, and so we need to escape these chars before writing them
-    const escapePathForNodeJs = (path: string) => path.replace(/\\/g, '\\\\');
+    const escapePathForNodeJs = (path: string) => {
+      return path.replace(/\\/g, "\\\\");
+    };
 
     const webpackConfiguration = `
     const { builtinModules } = require("module");
-    const { NormalModuleReplacementPlugin } = require("${
-      escapePathForNodeJs(pluginsPaths["webpack"])
-    }");
+    const { NormalModuleReplacementPlugin } = require("${escapePathForNodeJs(
+      pluginsPaths["webpack"],
+    )}");
+    const TerserPlugin = require("${escapePathForNodeJs(
+      pluginsPaths["terser-webpack-plugin"],
+    )}");
 
     module.exports = {
-      mode: "none",
+      name: "aws-lambda-nodejs-webpack",
+      mode: "production",
       entry: "${escapePathForNodeJs(entryFullPath)}",
       target: "node",
       resolve: {
-        modules: ["node_modules", "."],
-        extensions: [ '.ts', '.js' ],
+        // next line allows resolving not found modules to local versions (require("lib/log"))
+        modules: ["node_modules", "${escapePathForNodeJs(process.cwd())}"],
+        extensions: [ ".ts", ".js" ],
       },
+      context: "${escapePathForNodeJs(process.cwd())}",
       devtool: "source-map",
       module: {
         rules: [
@@ -151,6 +159,7 @@ export class NodejsFunction extends lambda.Function {
             use: {
               loader: "${escapePathForNodeJs(pluginsPaths["babel-loader"])}",
               options: {
+                cwd: "${escapePathForNodeJs(process.cwd())}",
                 cacheDirectory: true,
                 presets: [
                   [
@@ -167,19 +176,58 @@ export class NodejsFunction extends lambda.Function {
                   ]
                 ],
                 plugins: [
-                  "${escapePathForNodeJs(pluginsPaths["@babel/plugin-transform-runtime"])}",
-                  "${escapePathForNodeJs(pluginsPaths["babel-plugin-source-map-support"])}"
+                  "${escapePathForNodeJs(
+                    pluginsPaths["@babel/plugin-transform-runtime"],
+                  )}",
+                  "${escapePathForNodeJs(
+                    pluginsPaths["babel-plugin-source-map-support"],
+                  )}"
                 ]
               }
             }
           },
           {
             test: /\\.ts$/,
-            use: 'ts-loader',
+            use: {
+              loader: "${escapePathForNodeJs(
+                findModulePath("ts-loader", pluginsPath),
+              )}",
+              options: {
+                context: "${escapePathForNodeJs(process.cwd())}",
+                configFile: "${escapePathForNodeJs(
+                  path.join(process.cwd(), "tsconfig.json"),
+                )}",
+                transpileOnly: true
+              }
+            },
             exclude: /node_modules/,
           },
         ]
       },
+      cache: {
+        type: "filesystem",
+        buildDependencies: {
+          // force the config file to be this current file, since it won't change over builds
+          // while the temporary webpack config file used would change, thus disabling webpack cache
+          config: ["${escapePathForNodeJs(__filename)}"]
+        }
+      },
+      optimization: {
+        splitChunks: {
+          cacheGroups: {
+            vendor: {
+              chunks: "all",
+              filename: "vendor.js", // put all node_modules into vendor.js
+              name: "vendor",
+              test: /node_modules/,
+            },
+          },
+        },
+        minimize: true,
+        minimizer: [new TerserPlugin({
+          include: "vendor.js" // only minify vendor.js
+        })],
+      },
       externals: [...builtinModules, "aws-sdk"],
       output: {
         filename: "[name].js",
@@ -200,13 +248,23 @@ export class NodejsFunction extends lambda.Function {
 
     fs.writeFileSync(webpackConfigPath, webpackConfiguration);
 
-    // to implement cache, create a script that uses webpack API, store cache in a file with JSON.stringify, based on entry path key then reuse it
-    const webpack = spawn.sync(webpackBinPath, ["--config", webpackConfigPath], {
-      cwd: process.cwd(),
-    });
+    // console.time("webpack");
+    const webpack = spawn.sync(
+      webpackBinPath,
+      ["--config", webpackConfigPath],
+      {
+        // we force the CWD to aws-lambda-nodejs-webpack root, otherwise webpack-cli might resolve to the
+        // user's project version (https://github.com/webpack/webpack-cli/blob/master/packages/webpack-cli/bin/cli.js)
+        cwd: path.join(__dirname, ".."),
+      },
+    );
+    // console.timeEnd("webpack");
 
     if (webpack.status !== 0) {
-      console.error(`webpack had an error when bundling. Return status was ${webpack.status}`);
+      console.error(
+        `webpack had an error when bundling. Return status was ${webpack.status}`,
+      );
+      console.error(webpack.error);
       console.error(
         webpack?.output?.map(out => {
           return out?.toString();
@@ -216,8 +274,6 @@ export class NodejsFunction extends lambda.Function {
       process.exit(1);
     }
 
-    fs.unlinkSync(webpackConfigPath);
-
     super(scope, id, {
       ...props,
       runtime,
@@ -237,3 +293,24 @@ export class NodejsFunction extends lambda.Function {
 function nodeMajorVersion(): number {
   return parseInt(process.versions.node.split(".")[0], 10);
 }
+
+// this method forces resolving plugins relative to node_modules/aws-lambda-nodejs-webpack
+// otherwise they would be resolved to the user versions / undefined versions
+function findModulePath(moduleName: string, pluginsPath: string) {
+  try {
+    return require.resolve(moduleName);
+  } catch (error) {
+    const modulePath = findUp.sync(moduleName, {
+      type: "directory",
+      cwd: pluginsPath,
+    });
+
+    if (modulePath === undefined) {
+      throw new Error(
+        `Can't find module named ${moduleName} via require.resolve or find-up`,
+      );
+    }
+
+    return modulePath;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
