export a function from webpack.config.js

This lets us pass the `environment` variable when running webpack and
differentiate development builds from production builds

Author: nicoqh

package.json

@@ -1,6 +1,7 @@
 {
   "scripts": {
-    "dev": "webpack --config webpack.config.js"
+    "build": "webpack --env environment=production --config webpack.config.js",
+    "dev": "webpack --env environment=development --config webpack.config.js"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",

webpack.config.js

@@ -5,74 +5,84 @@ const path = require("path");
 const PATH_SOURCE = path.join(__dirname, "./src");
 const PATH_DIST = path.join(__dirname, "./dist");
 
-// Export a configuration object
-module.exports = {
-  // Tell Webpack to do some optimizations for our environment (development
-  // or production). Webpack will enable certain plugins and set
-  // `process.env.NODE_ENV` according to the environment we specify.
-  // https://webpack.js.org/configuration/mode
-  mode: "development",
+// If we export a function, it will be passed two parameters, the first
+// of which is the webpack command line environment option `--env`.
+// `webpack --env.a = b` sets env.a = 'b'
+// `webpack --env.production` sets env.production = true
+// https://webpack.js.org/configuration/configuration-types/#exporting-a-function
+module.exports = (env) => {
+  const environment = env.environment;
+  const isProduction = environment === "production";
+  const isDevelopment = environment === "development";
 
-  // The point or points to enter the application. This is where Webpack will
-  // start. We generally have one entry point per HTML page. For single-page
-  // applications, this means one entry point. For traditional multi-page apps,
-  // we may have multiple entry points.
-  // https://webpack.js.org/concepts#entry
-  entry: [path.join(PATH_SOURCE, "./index.js")],
+  return {
+    // Tell Webpack to do some optimizations for our environment (development
+    // or production). Webpack will enable certain plugins and set
+    // `process.env.NODE_ENV` according to the environment we specify.
+    // https://webpack.js.org/configuration/mode
+    mode: environment,
 
-  // Tell Webpack where to emit the bundles it creates and how to name them.
-  // https://webpack.js.org/concepts#output
-  // https://webpack.js.org/configuration/output
-  // https://webpack.js.org/configuration/output#outputFilename
-  output: {
-    path: PATH_DIST,
-    filename: "js/[name].[contenthash].js",
+    // The point or points to enter the application. This is where Webpack will
+    // start. We generally have one entry point per HTML page. For single-page
+    // applications, this means one entry point. For traditional multi-page apps,
+    // we may have multiple entry points.
+    // https://webpack.js.org/concepts#entry
+    entry: [path.join(PATH_SOURCE, "./index.js")],
 
-    // The public URL of the output dir when referenced in a browser.
-    // This value is prefixed to every URL created by the runtime or loaders.
-    // It's empty by default, which creates URLs like 'bundle.js' and results
-    // in 404s if they're requested from a nested URL like /articles/1
-    // https://webpack.js.org/configuration/output/#outputpublicpath
-    publicPath: "/",
-  },
+    // Tell Webpack where to emit the bundles it creates and how to name them.
+    // https://webpack.js.org/concepts#output
+    // https://webpack.js.org/configuration/output
+    // https://webpack.js.org/configuration/output#outputFilename
+    output: {
+      path: PATH_DIST,
+      filename: "js/[name].[contenthash].js",
 
-  // Determine how the different types of modules will be treated.
-  // https://webpack.js.org/configuration/module
-  // https://webpack.js.org/concepts#loaders
-  module: {
-    rules: [
-      {
-        test: /\.js$/, // Apply this rule to files ending in .js
-        exclude: /node_modules/, // Don't apply to files residing in node_modules
-        use: {
-          // Use the following loader and options
-          loader: "babel-loader",
-          // We can pass options to both babel-loader and Babel. This option object
-          // will replace babel.config.js
-          options: {
-            presets: [
-              [
-                "@babel/preset-env",
-                {
-                  debug: true, // Output the targets/plugins used when compiling
+      // The public URL of the output dir when referenced in a browser.
+      // This value is prefixed to every URL created by the runtime or loaders.
+      // It's empty by default, which creates URLs like 'bundle.js' and results
+      // in 404s if they're requested from a nested URL like /articles/1
+      // https://webpack.js.org/configuration/output/#outputpublicpath
+      publicPath: "/",
+    },
 
-                  // Configure how @babel/preset-env handles polyfills from core-js.
-                  // https://babeljs.io/docs/en/babel-preset-env
-                  useBuiltIns: "usage",
+    // Determine how the different types of modules will be treated.
+    // https://webpack.js.org/configuration/module
+    // https://webpack.js.org/concepts#loaders
+    module: {
+      rules: [
+        {
+          test: /\.js$/, // Apply this rule to files ending in .js
+          exclude: /node_modules/, // Don't apply to files residing in node_modules
+          use: {
+            // Use the following loader and options
+            loader: "babel-loader",
+            // We can pass options to both babel-loader and Babel. This option object
+            // will replace babel.config.js
+            options: {
+              presets: [
+                [
+                  "@babel/preset-env",
+                  {
+                    debug: true, // Output the targets/plugins used when compiling
 
-                  // Specify the core-js version. Must match the version in package.json
-                  corejs: 3,
+                    // Configure how @babel/preset-env handles polyfills from core-js.
+                    // https://babeljs.io/docs/en/babel-preset-env
+                    useBuiltIns: "usage",
 
-                  // Specify which environments we support/target for our project.
-                  // (We have chosen to specify targets in .browserslistrc, so there
-                  // is no need to do it here.)
-                  // targets: "",
-                },
+                    // Specify the core-js version. Must match the version in package.json
+                    corejs: 3,
+
+                    // Specify which environments we support/target for our project.
+                    // (We have chosen to specify targets in .browserslistrc, so there
+                    // is no need to do it here.)
+                    // targets: "",
+                  },
+                ],
               ],
-            ],
+            },
           },
         },
-      },
-    ],
-  },
+      ],
+    },
+  };
 };