Video 1.6: piecing together with 'addons'.

build-utils/addons/webpack.bundleanalyze.js

@@ -0,0 +1,6 @@
+const WebpackBundleAnalyzer = require("webpack-bundle-analyzer")
+  .BundleAnalyzerPlugin;
+
+module.exports = {
+  plugins: [new WebpackBundleAnalyzer()]
+};

build-utils/addons/webpack.bundlebuddy.js

@@ -0,0 +1,10 @@
+// This plugin always fails.
+//
+// https://github.com/TheLarkInn/bundle-buddy-webpack-plugin/blob/master/src/index.js
+
+
+const WebpackBundleBuddy = require("bundle-buddy-webpack-plugin");
+
+module.exports = {
+  plugins: [new WebpackBundleBuddy({ sam: false, warnings: false })]
+};

build-utils/addons/webpack.firstplugin.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [function apply() {
+    const compiler = this;
+
+    console.log(compiler);
+  }]
+};

package.json

@@ -5,8 +5,10 @@
   },
   "description": "Web Fundamentals with Webpack 3.3",
   "devDependencies": {
+    "bundle-buddy-webpack-plugin": "^0.3.0",
     "prettier": "^1.19.1",
     "webpack": "^3.3.0",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-dev-server": "^2.5.1",
     "webpack-merge": "^4.2.2"
   },
@@ -16,9 +18,17 @@
   "scripts": {
     "build": "webpack",
     "build:dev": "yarn build --env.env=dev",
+    "build:dev:bundleanalyze": "yarn build:dev --env.addons=bundleanalyze",
+    "build:dev:bundlebuddy": "yarn build:dev --env.addons=bundlebuddy",
+    "build:prod": "yarn build --env.env=prod",
+    "build:prod:bundleanalyze": "yarn build:prod --env.addons=bundleanalyze",
+    "build:prod:bundlebuddy": "yarn build:prod --env.addons=bundlebuddy",
+    "build:prod:both": "yarn build:prod --env.addons=bundleanalyze --env.addons=bundlebuddy",
+    "build:prod:firstplugin": "yarn build:prod --env.addons=firstplugin",
     "build:watch": "yarn build --watch",
     "build:watch:dev": "yarn build:watch --env.env=dev",
-    "build:watch:prod": "yarn build:watch --env.env=prod"
+    "build:watch:prod": "yarn build:watch --env.env=prod",
+    "webpack-defaults": "webpack-defaults"
   },
   "version": "1.0.0"
 }

webpack.config.js

@@ -3,12 +3,36 @@ const webpackMerge = require("webpack-merge");
 
 const defaultEnv = { env: "prod" };
 
+/**
+ *
+ * @param {string|Array} addonsArg
+ * @return {unknown[]}
+ */
+const addons = addonsArg => {
+  // Normalize array of addons (flatten).
+  let addons = [].concat
+    .apply([], [addonsArg])
+    // If addons is undefined, filter it out.
+    .filter(Boolean);
+
+  return addons.map(addonName =>
+    require(`./build-utils/addons/webpack.${addonName}.js`)
+  );
+};
+
 // Export a function returning config instead of a static config.
 // The purpose is to allow use of the environment.
 module.exports = (env = defaultEnv) => {
+  console.log(env);
   const envConfig = require(`./build-utils/webpack.${env.env}`);
 
-  // The latter overwrites (merges into) the former.
-  const config = webpackMerge(commonConfig, envConfig);
-  return config;
+  // The rightmost overwrites (merges into) its left sibling.
+  const mergedConfig = webpackMerge(
+    commonConfig,
+    envConfig,
+    ...addons(env.addons)
+  );
+
+  console.log(mergedConfig);
+  return mergedConfig;
 };