Video 1.2: using the webpack configuration function.

.idea/runConfigurations/log.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="log" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="build:log" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

.idea/runConfigurations/watch.xml

@@ -3,7 +3,7 @@
     <package-json value="$PROJECT_DIR$/package.json" />
     <command value="run" />
     <scripts>
-      <script value="watch" />
+      <script value="build:log" />
     </scripts>
     <node-interpreter value="project" />
     <envs />

package.json

@@ -13,9 +13,9 @@
   "main": "index.js",
   "name": "starting-out-right",
   "scripts": {
-    "build": "webpack --verbose",
-    "debug": "yarn build --env.debug=1",
-    "watch": "yarn build --watch"
+    "build": "webpack",
+    "build:log": "yarn build --env.log=1 --env.foo=bar",
+    "build:watch": "yarn build --watch"
   },
   "version": "1.0.0"
 }

webpack.config.js

@@ -1,9 +1,14 @@
 const path = require("path"); // NodeJS builtin.
 
-module.exports = {
-  entry: "./src/",
-  output: {
-    filename: "bundle.js",
-    path: path.join(__dirname, "dist") // path must be absolute.
-  }
+// Export a function returning config instead of a static config.
+// The purpose is to allow use of the environment.
+module.exports = env => {
+  console.log(env);
+  return {
+    entry: "./src/",
+    output: {
+      filename: "bundle.js",
+      path: path.join(__dirname, "dist") // path must be absolute.
+    }
+  };
 };