Merge module rules with custom webpack config

.github/workflows/test.yml

@@ -0,0 +1,27 @@
+name: Test
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+    - run: yarn install
+    - run: yarn test

.gitignore

@@ -1,4 +1,3 @@
 node_modules/
-yarn.lock
 package-lock.json
 yarn-error.log

README.md

@@ -101,6 +101,23 @@ module.exports = function(env, args) {
 };
 ```
 
+If you want to adapt predefined rules and merge them to one, you may do so by matching `test`-expression:
+
+```Javascript
+module.exports = function(env, args) {
+  return {
+    module: {
+      rules: [
+        {
+          test: /\.(sass|scss)$/,  // use same expression used by plugin to merge
+          ...
+        }
+      ]
+    },
+  };
+};
+```
+
 To remove entry points from webpack, you can set them to null in your own configuration
 
 ## Using modernizr

helpers/configHelpers.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const { mergeWithCustomize } = require('webpack-merge');
+const { mergeWithRules, CustomizeRule } = require('webpack-merge');
 
 const argv = require('minimist')(process.argv.slice(3));
 
@@ -14,6 +14,23 @@ function getCustomWebpackConfiguration() {
     ? require(path.resolve(process.cwd(), 'webpack.js'))
     : null;
 }
+/**
+ * takes two (partial) configs and compares if a key was set to a non-undefined falsy value in the custom configuration
+
+ * @param {object} dc default configuration in current environment
+ * @param {object} cc custom configuration from project in current environment
+ */
+function deleteRemovedKeys(dc, cc) {
+  if (cc) {
+    Object.keys(dc).forEach((key) => {
+      const isUnset = cc[key] !== undefined && !cc[key];
+      if (isUnset) {
+        delete dc[key];
+        delete cc[key];
+      }
+    });
+  }
+}
 
 function getOutputPath(environment) {
   return (
@@ -24,32 +41,40 @@ function getOutputPath(environment) {
   );
 }
 
-function buildCustomConfiguration(environment) {
+function buildCombinedConfiguration(environment) {
   const defaultConfiguration = require(`../config/webpack.${environment}`);
   if (!hasOwnConfig()) {
     return defaultConfiguration;
   }
-  const customConfig = getCustomWebpackConfiguration();
+  const customConfiguration = getCustomWebpackConfiguration();
+
+  return combineConfigurations(defaultConfiguration, customConfiguration);
+}
 
+function combineConfigurations(defaultConfiguration, customConfiguration) {
   return function (env, args) {
-    return mergeWithCustomize({
-      customizeObject(a, b, key) {
-        if (key === 'entry') {
-          Object.keys(a).forEach((key) => {
-            if (b[key] !== undefined && !b[key]) {
-              delete a[key];
-              delete b[key];
-            }
-          });
-        }
+    const defaultConf = defaultConfiguration(env, args);
+    const customConf = customConfiguration(env, args);
 
-        return undefined;
-      },
-    })(defaultConfiguration(env, args), customConfig(env, args));
+    // Remove the entry points if they are set to non-undefined falsy values in the custom configuration
+    deleteRemovedKeys(defaultConf.entry, customConf.entry);
+
+    return mergeWithRules({
+      module: {
+        rules: {
+          test: CustomizeRule.Match,
+          use: {
+            loader: "match",
+            options: "replace"
+          }
+        }
+      }
+    })(defaultConf, customConf);
   };
 }
 
 module.exports = {
-  buildCustomConfiguration,
+  buildCombinedConfiguration,
+  combineConfigurations,
   getOutputPath,
 };

helpers/configHelpers.spec.js

@@ -0,0 +1,128 @@
+const { combineConfigurations } = require('./configHelpers');
+
+const expect = require('chai').expect;
+
+describe('configHelpers', function () {
+  describe('combineConfigurations', function () {
+    const mockBabelLoader = function () {};
+    const mockCssExtractLoader = function () {};
+    const mockCssLoader = function () {};
+    const mockPostCssLoader = function () {};
+    const mockSassLoader = function () {};
+    const mockAutoprefixerPlugin = function () {};
+
+    const defaultConfiguration = function (env, args) {
+      const mode = args.mode;
+      return {
+        entry: {
+          header: 'header.js',
+        },
+        module: {
+          rules: [
+            {
+              test: /\.(js|mjs|jsx|ts|tsx)$/,
+              loader: mockBabelLoader,
+            },
+            {
+              test: /\.(sass|scss)$/,
+              use: [
+                mockCssExtractLoader,
+                {
+                  loader: mockCssLoader,
+                  options: {
+                    sourceMap: true,
+                  },
+                },
+                {
+                  loader: mockPostCssLoader,
+                  options: {
+                    postcssOptions: {
+                      plugins: [mockAutoprefixerPlugin],
+                    },
+                    sourceMap: true,
+                  },
+                },
+                {
+                  loader: mockSassLoader,
+                  options: {
+                    sourceMap: true,
+                    sassOptions: {
+                      outputStyle:
+                        mode === 'production' ? 'compressed' : 'nested',
+                    },
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      };
+    };
+
+    describe('with unset entry in custom config', function () {
+      const customConfiguration = function (env, args) {
+        return {
+          entry: {
+            header: null,
+            footer: 'footer.js',
+          },
+        };
+      };
+
+      it('is removed from entries', function () {
+        const config = combineConfigurations(
+          defaultConfiguration,
+          customConfiguration
+        )('dev', { mode: 'development' });
+        expect(config.entry).to.deep.eq({
+          footer: 'footer.js',
+        });
+      });
+    });
+
+    describe('with existing rule with overwritten loader', function () {
+      const mockTailwindPlugin = function () {};
+
+      const customConfiguration = function (env, args) {
+        return {
+          module: {
+            rules: [
+              {
+                test: /\.(sass|scss)$/,
+                use: [
+                  {
+                    loader: mockPostCssLoader,
+                    options: {
+                      postcssOptions: {
+                        plugins: [mockTailwindPlugin, mockAutoprefixerPlugin],
+                      },
+                      sourceMap: true,
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        };
+      };
+
+      it('replaces an existing loader', function () {
+        const config = combineConfigurations(
+          defaultConfiguration,
+          customConfiguration
+        )('dev', { mode: 'development' });
+        expect(config.module.rules).to.have.length(2);
+        expect(config.module.rules[1].use).to.have.length(4);
+        expect(config.module.rules[1].use[2]).to.deep.eq({
+          loader: mockPostCssLoader,
+          options: {
+            postcssOptions: {
+              plugins: [mockTailwindPlugin, mockAutoprefixerPlugin],
+            },
+            sourceMap: true,
+          },
+        });
+      });
+    });
+  });
+});

package.json

@@ -15,7 +15,7 @@
     "url": "https://github.com/networkteam/nwt-frontend-scripts"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "mocha 'helpers/*.spec.js'"
   },
   "dependencies": {
     "@babel/core": "^7.14.3",

scripts/build.js

@@ -73,7 +73,7 @@ async function processBuild(environment) {
 function build(environment, previousFileSizes) {
   const webpack = require('webpack');
   const combinedConfiguration =
-    configHelpers.buildCustomConfiguration(environment);
+    configHelpers.buildCombinedConfiguration(environment);
 
   const compiler = webpack(combinedConfiguration(environment, argv));
 

scripts/watch.js

@@ -12,7 +12,7 @@ async function processWatch(environment) {
   const webpack = require('webpack');
 
   const combinedConfiguration =
-    configHelpers.buildCustomConfiguration(environment);
+    configHelpers.buildCombinedConfiguration(environment);
   const compiler = webpack(combinedConfiguration(environment, argv));
 
   compiler.hooks.invalid.tap('invalid', () => {