Video 1.5: composition with webpack-merge.

.idea/runConfigurations/log.xml → .idea/runConfigurations/dev.xml

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

build-utils/webpack.dev.js

@@ -0,0 +1,5 @@
+const config = {
+  devtool: "sourcemap"
+};
+
+module.exports = config;

build-utils/webpack.prod.js

@@ -0,0 +1,3 @@
+const config = {};
+
+module.exports = config;

package.json

@@ -7,15 +7,18 @@
   "devDependencies": {
     "prettier": "^1.19.1",
     "webpack": "^3.3.0",
-    "webpack-dev-server": "^2.5.1"
+    "webpack-dev-server": "^2.5.1",
+    "webpack-merge": "^4.2.2"
   },
   "license": "MIT",
   "main": "index.js",
   "name": "starting-out-right",
   "scripts": {
     "build": "webpack",
-    "build:log": "yarn build --env.log=1 --env.foo=bar",
-    "build:watch": "yarn build --watch"
+    "build:dev": "yarn build --env.env=dev",
+    "build:watch": "yarn build --watch",
+    "build:watch:dev": "yarn build:watch --env.env=dev",
+    "build:watch:prod": "yarn build:watch --env.env=prod"
   },
   "version": "1.0.0"
 }

webpack.config.js

@@ -1,7 +1,14 @@
 const commonConfig = require("./build-utils/webpack.common");
+const webpackMerge = require("webpack-merge");
+
+const defaultEnv = { env: "prod" };
 
 // Export a function returning config instead of a static config.
 // The purpose is to allow use of the environment.
-module.exports = env => {
-  return { ...commonConfig };
+module.exports = (env = defaultEnv) => {
+  const envConfig = require(`./build-utils/webpack.${env.env}`);
+
+  // The latter overwrites (merges into) the former.
+  const config = webpackMerge(commonConfig, envConfig);
+  return config;
 };

yarn.lock

@@ -1835,7 +1835,7 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
-lodash@^4.17.11, lodash@^4.17.14:
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -3422,6 +3422,13 @@ webpack-dev-server@^2.5.1:
     webpack-dev-middleware "1.12.2"
     yargs "6.6.0"
 
+webpack-merge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
+  integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==
+  dependencies:
+    lodash "^4.17.15"
+
 webpack-sources@^1.0.1:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"