Use webpack-merge to split config clearly

Author: Olaf Kwant

package-lock.json

@@ -34,7 +34,8 @@
     "babel-preset-env": "^1.7.0",
     "native-promise-only": "^0.8.1",
     "webpack": "^4.25.1",
-    "webpack-cli": "^3.1.0"
+    "webpack-cli": "^3.1.0",
+    "webpack-merge": "^4.1.4"
   },
   "devDependencies": {
     "chai": "^4.1.2",

package.json

@@ -1,69 +1,83 @@
 const path = require('path')
 const packageJson = require('./package.json')
+const webpackMerge = require('webpack-merge')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const Visualizer = require('webpack-visualizer-plugin')
 
-module.exports = function (env = {}) {
-  const config = {
-    mode: env.production ? 'production' : 'development',
-    devtool: 'source-map',
-
-    entry: {
-      'zaf_sdk': [
-        'native-promise-only',
-        './lib/index.js'
-      ],
-      'zaf_sdk.min': [
-        'native-promise-only',
-        './lib/index.js'
-      ]
-    },
+const commonConfig = {
+  devtool: 'source-map',
 
-    module: {
-      rules: []
-    },
+  entry: {
+    'zaf_sdk': [
+      'native-promise-only',
+      './lib/index.js'
+    ],
+    'zaf_sdk.min': [
+      'native-promise-only',
+      './lib/index.js'
+    ]
+  },
 
-    plugins: [],
+  output: {
+    library: 'ZAFClient',
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'build')
+  },
 
-    output: {
-      library: 'ZAFClient',
-      filename: '[name].js',
-      path: path.resolve(__dirname, 'build')
-    },
+  externals: {
+    version: `"${packageJson.version}"`
+  },
 
-    externals: {
-      version: `"${packageJson.version}"`
-    },
-
-    // Note: devServer does not serve from build/, but from cache. It also doesn't respect mode
-    // so outputed files are very different from server/build/build:dev
-    devServer: {
-      contentBase: path.join(__dirname, 'build'),
-      compress: true,
-      port: 9001
-    }
+  // Note: devServer does not serve from build/, but from cache. It also doesn't respect mode
+  // so outputed files are very different from server/build/build:dev
+  devServer: {
+    contentBase: path.join(__dirname, 'build'),
+    compress: true,
+    port: 9001
   }
+}
 
-  // For everything execpt tests we add optimization and babel
-  if (!env.test) {
-    config.optimization = {
-      minimize: true,
-      minimizer: [new UglifyJsPlugin({
+// For everything execpt tests we add optimization and babel
+const nonTestConfig = {
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new UglifyJsPlugin({
         include: /\.min\.js$/,
         sourceMap: true
-      })]
-    }
+      })
+    ]
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: { loader: 'babel-loader', options: { plugins: [], presets: ['babel-preset-env'] } }
+      }
+    ]
+  }
+}
 
-    config.module.rules.push({
-      test: /\.js$/,
-      use: { loader: 'babel-loader', options: { plugins: [], presets: ['babel-preset-env'] } }
+const statsConfig = {
+  plugins: [
+    new Visualizer({
+      filename: './statistics.html'
     })
+  ]
+}
+
+module.exports = function (env = {}) {
+  let config = webpackMerge(commonConfig, {
+    mode: env.production ? 'production' : 'development'
+  })
+
+  if (!env.test) {
+    config = webpackMerge(config, nonTestConfig)
   }
 
   if (env.stats) {
-    const Visualizer = require('webpack-visualizer-plugin')
-    config.plugins.push(new Visualizer({
-      filename: './statistics.html'
-    }))
+    config = webpackMerge(config, statsConfig)
   }
 
   return config