Run a separate instance of Webpack per JS entry file

Author: Kai Eichinger

package.json

@@ -14,7 +14,7 @@
     },
     "scripts": {
         "build": "node_modules/.bin/tsc --noEmitOnError --noErrorTruncation --listEmittedFiles --pretty --noUnusedLocals && chmod +x bin/run.js",
-        "dev": "node_modules/.bin/tsc --noEmitOnError --noErrorTruncation --listEmittedFiles --pretty",
+        "dev": "node_modules/.bin/tsc --noEmitOnError --noErrorTruncation --listEmittedFiles --pretty --watch",
         "prepublishOnly": "npm run-script build",
         "test": "npm run-script build && ava"
     },

src/@types/kaba.d.ts

@@ -27,7 +27,7 @@ declare namespace kaba
         sass: SassBuildConfig;
         js?: {
             common: WebpackBuildConfig;
-            module: WebpackBuildConfig|null;
+            module: WebpackBuildConfig[]|null;
             legacy: WebpackBuildConfig;
             javaScriptDependenciesFileName: string;
             basePath: string;

src/Kaba.ts

@@ -277,9 +277,9 @@ export class Kaba
             jsConfig = {
                 common: this.buildWebpackCommon(cliConfig),
                 module: this.buildModern
-                    ? this.buildWebpackConfig(cliConfig, true)
+                    ? this.buildWebpackConfigs(cliConfig, true)
                     : null,
-                legacy: this.buildWebpackConfig(cliConfig, false),
+                legacy: this.buildWebpackConfigs(cliConfig, false),
                 javaScriptDependenciesFileName: this.javaScriptDependenciesFileName,
                 basePath: path.join(this.outputPaths.base, this.outputPaths.js),
             };
@@ -423,7 +423,7 @@ export class Kaba
     /**
      * Builds the specialized webpack config for a legacy / module build
      */
-    private buildWebpackConfig (cliConfig: kaba.CliConfig, isModule: boolean): Partial<webpack.Configuration>
+    private buildWebpackConfigs (cliConfig: kaba.CliConfig, isModule: boolean): Partial<webpack.Configuration>[]
     {
         const babelLoader = {
             loader: "babel-loader?cacheDirectory",
@@ -454,10 +454,7 @@ export class Kaba
             isModule ? "tsconfig.modern.json" : "tsconfig.legacy.json",
         );
 
-        return {
-            // entry
-            entry: entries,
-
+        let configTemplate = {
             // output
             output: {
                 path: path.join(this.outputPaths.base, this.outputPaths.js, isModule ? "modern" : "legacy"),
@@ -498,23 +495,6 @@ export class Kaba
                         test: /\.(svg|txt)$/,
                         loader: "raw-loader",
                     },
-
-                    // ESLint
-                    {
-                        test: /\.m?jsx?$/,
-                        // only lint files that are in the project dir & exclude tests, vendor and node_modules
-                        include: (path) => path.startsWith(this.cwd) && !/node_modules|tests|vendor/.test(path),
-                        loader: "eslint-loader",
-                        options: {
-                            cache: true,
-                            configFile: path.join(this.libRoot, "configs/.eslintrc.yml"),
-                            fix: cliConfig.fix,
-                            parser: "babel-eslint",
-                            quiet: !cliConfig.lint,
-                            // always only emit a warning, so to actually never fail the webpack build
-                            emitWarning: true,
-                        },
-                    },
                 ],
             },
 
@@ -529,6 +509,37 @@ export class Kaba
                 }),
             ],
         };
+
+        return Object.keys(entries).map((entryFile, index) =>
+        {
+            let config = Object.assign({}, configTemplate, {
+                entry: {
+                    [entryFile]: entries[entryFile],
+                },
+            }) as Partial<webpack.Configuration>;
+
+            if (isModule && undefined !== config.module)
+            {
+                (config.module.rules as any).push({
+                    // ESLint
+                    test: /\.m?jsx?$/,
+                    // only lint files that are in the project dir & exclude tests, vendor and node_modules
+                    include: (path) => path.startsWith(this.cwd) && !/node_modules|tests|vendor/.test(path),
+                    loader: "eslint-loader",
+                    options: {
+                        cache: true,
+                        configFile: path.join(this.libRoot, "configs/.eslintrc.yml"),
+                        fix: cliConfig.fix,
+                        parser: "babel-eslint",
+                        quiet: !cliConfig.lint,
+                        // always only emit a warning, so to actually never fail the webpack build
+                        emitWarning: true,
+                    },
+                });
+            }
+
+            return config;
+        });
     }
 }
 

src/runner/WebpackRunner.ts

@@ -47,31 +47,52 @@ export class WebpackRunner
 
                 let configs: webpack.Configuration[] = [];
 
-                configs.push(
-                    Object.assign(
-                        {},
-                        this.buildConfig.js.common,
-                        this.buildConfig.js.legacy,
+                if (Array.isArray(this.buildConfig.js.legacy))
+                {
+                    this.buildConfig.js.legacy.forEach(legacyConfig =>
+                    {
+                        // For some reason TypeScript thinks that `this.buildConfig.js` might become `undefined`, even though we have this check already in line 34
+                        if (!this.buildConfig.js)
                         {
-                            plugins: (this.buildConfig.js.common.plugins as any[]).concat(this.buildConfig.js.legacy.plugins),
-                            name: "legacy",
+                            return;
                         }
-                    )
-                );
 
-                if (this.buildConfig.js.module)
+                        configs.push(
+                            Object.assign(
+                                {},
+                                this.buildConfig.js.common,
+                                legacyConfig,
+                                {
+                                    plugins: (this.buildConfig.js.common.plugins as any[]).concat(legacyConfig.plugins),
+                                    name: "legacy",
+                                }
+                            )
+                        );
+                    });
+                }
+
+                if (Array.isArray(this.buildConfig.js.module))
                 {
-                    configs.push(
-                        Object.assign(
-                            {},
-                            this.buildConfig.js.common,
-                            this.buildConfig.js.module,
-                            {
-                                plugins: (this.buildConfig.js.common.plugins as any[]).concat(this.buildConfig.js.module.plugins),
-                                name: "modern",
-                            }
-                        )
-                    );
+                    this.buildConfig.js.module.forEach(moduleConfig =>
+                    {
+                        // For some reason TypeScript thinks that `this.buildConfig.js` might become `undefined`, even though we have this check already in line 34
+                        if (!this.buildConfig.js)
+                        {
+                            return;
+                        }
+
+                        configs.push(
+                            Object.assign(
+                                {},
+                                this.buildConfig.js.common,
+                                moduleConfig,
+                                {
+                                    plugins: (this.buildConfig.js.common.plugins as any[]).concat(moduleConfig.plugins),
+                                    name: "modern",
+                                }
+                            )
+                        );
+                    });
                 }
 
                 let compiler = webpack(configs) as webpack.MultiCompiler;