define build config in a single place

Author: jesko-plitt

src/@types/kaba.d.ts

@@ -26,7 +26,7 @@ declare namespace kaba
     {
         sass: SassBuildConfig;
         js?: {
-            common: WebpackBuildConfig;
+            watch: boolean,
             configs: WebpackBuildConfig[];
             javaScriptDependenciesFileName: string;
             basePath: string;

src/Kaba.ts

@@ -77,6 +77,7 @@ export class Kaba
                 h: ["preact", "h"],
                 Fragment: ["preact", "Fragment"],
             }),
+            new CleanWebpackPlugin(),
         ];
 
         // set defaults
@@ -277,20 +278,16 @@ export class Kaba
             const compilerConfigs: kaba.WebpackBuildConfig[] = [];
 
             Object.keys(this.jsEntries).forEach((entry: string) => {
+                compilerConfigs.push(this.buildWebpackConfig(entry, this.jsEntries[entry], cliConfig, false));
+
                 if (this.buildModern)
                 {
                     compilerConfigs.push(this.buildWebpackConfig(entry, this.jsEntries[entry], cliConfig, true));
                 }
             });
 
-            // The log output gets really big with multiple entry files.
-            // Therefore the linted (legacy) entries are added after the modern ones.
-            Object.keys(this.jsEntries).forEach((entry: string) => {
-                compilerConfigs.push(this.buildWebpackConfig(entry, this.jsEntries[entry], cliConfig, false));
-            });
-
             jsConfig = {
-                common: this.buildWebpackCommon(cliConfig),
+                watch: cliConfig.watch,
                 configs: compilerConfigs,
                 javaScriptDependenciesFileName: this.javaScriptDependenciesFileName,
                 basePath: path.join(this.outputPaths.base, this.outputPaths.js),
@@ -311,11 +308,34 @@ export class Kaba
 
 
     /**
-     * Builds the common webpack config, that is common between legacy & module
+     * Builds the specialized webpack config for a legacy / module build
      */
-    private buildWebpackCommon (cliConfig: kaba.CliConfig): Partial<webpack.Configuration>
+    private buildWebpackConfig (entry: string, entryFile: string, cliConfig: kaba.CliConfig, isModule: boolean): Partial<webpack.Configuration>
     {
-        const config: Partial<webpack.Configuration> = {
+        const babelLoader = {
+            loader: "babel-loader?cacheDirectory",
+            options: {
+                babelrc: false,
+                presets: [
+                    [isModule ? kabaBabelPreset.modern : kabaBabelPreset.legacy],
+                ],
+            },
+        };
+
+        let typeScriptConfig = path.join(
+            this.libRoot,
+            "configs",
+            isModule ? "tsconfig.modern.json" : "tsconfig.legacy.json",
+        );
+
+        const entryName = isModule ? `_modern.${entry}` : entry;
+
+        let configTemplate = {
+            name: isModule ? "modern" : "legacy",
+            entry: {
+                [entryName]: entryFile,
+            },
+
             // mode
             mode: cliConfig.debug ? "development" : "production",
 
@@ -340,9 +360,47 @@ export class Kaba
                 ],
             },
 
+            // output
+            output: {
+                path: path.join(this.outputPaths.base, this.outputPaths.js, isModule ? "modern" : "legacy"),
+                filename: this.hashFileNames ? '[name].[chunkhash].js' : '[name].js',
+                // the slash at the end is required of the public path entries
+                publicPath: path.join(this.publicPath, isModule ? "modern/" : "legacy/"),
+                pathinfo: cliConfig.debug,
+            },
+
             // module
             module: {
-                rules: [],
+                rules: [
+                    // TypeScript
+                    {
+                        test: /\.tsx?$/,
+                        use: [
+                            'cache-loader',
+                            babelLoader,
+                            {
+                                loader: "ts-loader",
+                                options: {
+                                    context: this.cwd,
+                                    configFile: typeScriptConfig,
+                                    errorFormatter: (message, colors) => typeScriptErrorFormatter(message, colors, this.cwd),
+                                },
+                            },
+                        ],
+                    },
+
+                    // Babel
+                    {
+                        test: /\.m?jsx?$/,
+                        use: ['cache-loader', babelLoader],
+                    },
+
+                    // content files
+                    {
+                        test: /\.(svg|txt)$/,
+                        loader: "raw-loader",
+                    },
+                ] as webpack.RuleSetRule[],
             },
 
             // optimization
@@ -351,8 +409,6 @@ export class Kaba
                 minimizer: [],
             },
 
-            // performance
-
             // devtool (source maps)
             devtool: cliConfig.debug
                 ? "inline-cheap-source-map"
@@ -373,10 +429,11 @@ export class Kaba
             stats: {
                 // hide children information (like from the ExtractTextPlugin)
                 children: false,
+                hash: !isModule,
+                version: !isModule,
+                modules: !isModule,
             },
 
-            // devServer
-
             // plugins
             plugins: this.plugins,
 
@@ -387,11 +444,20 @@ export class Kaba
             // don't automatically polyfill certain node libraries
             // as we don't care about these implementations and they just add weight
             node: this.nodeSettings,
-        };
+        } as Partial<webpack.Configuration>;
+
+        (configTemplate.plugins as webpack.Plugin[]).push(
+            new DefinePlugin({
+                'process.env.MODERN_BUILD': isModule,
+                'MODERN_BUILD': isModule,
+                'process.env.DEBUG': cliConfig.debug,
+                'DEBUG': cliConfig.debug,
+            })
+        );
 
         if (!cliConfig.debug)
         {
-            (config.optimization as any).minimizer.push(new TerserPlugin({
+            (configTemplate.optimization as any).minimizer.push(new TerserPlugin({
                 cache: true,
                 parallel: true,
                 sourceMap: true,
@@ -407,7 +473,7 @@ export class Kaba
             try
             {
                 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-                (config.plugins as any[]).push(new BundleAnalyzerPlugin());
+                (configTemplate.plugins as any[]).push(new BundleAnalyzerPlugin());
             }
             catch (e)
             {
@@ -428,96 +494,9 @@ export class Kaba
 
         }
 
-        return config;
-    }
-
-
-    /**
-     * Builds the specialized webpack config for a legacy / module build
-     */
-    private buildWebpackConfig (entry: string, entryFile: string, cliConfig: kaba.CliConfig, isModule: boolean): Partial<webpack.Configuration>
-    {
-        const babelLoader = {
-            loader: "babel-loader?cacheDirectory",
-            options: {
-                babelrc: false,
-                presets: [
-                    [isModule ? kabaBabelPreset.modern : kabaBabelPreset.legacy],
-                ],
-            },
-        };
-
-        let typeScriptConfig = path.join(
-            this.libRoot,
-            "configs",
-            isModule ? "tsconfig.modern.json" : "tsconfig.legacy.json",
-        );
-
-        const entryObjKey = isModule ? `_modern.${entry}` : entry;
-
-        let configTemplate = {
-            name: isModule ? "modern" : "legacy",
-            entry: {
-                [entryObjKey]: entryFile,
-            },
-
-            // output
-            output: {
-                path: path.join(this.outputPaths.base, this.outputPaths.js, isModule ? "modern" : "legacy"),
-                filename: this.hashFileNames ? '[name].[chunkhash].js' : '[name].js',
-                // the slash at the end is required of the public path entries
-                publicPath: path.join(this.publicPath, isModule ? "modern/" : "legacy/"),
-                pathinfo: cliConfig.debug,
-            },
-
-            // module
-            module: {
-                rules: [
-                    // TypeScript
-                    {
-                        test: /\.tsx?$/,
-                        use: [
-                            'cache-loader',
-                            babelLoader,
-                            {
-                                loader: "ts-loader",
-                                options: {
-                                    context: this.cwd,
-                                    configFile: typeScriptConfig,
-                                    errorFormatter: (message, colors) => typeScriptErrorFormatter(message, colors, this.cwd),
-                                },
-                            },
-                        ],
-                    },
-
-                    // Babel
-                    {
-                        test: /\.m?jsx?$/,
-                        use: ['cache-loader', babelLoader],
-                    },
-
-                    // content files
-                    {
-                        test: /\.(svg|txt)$/,
-                        loader: "raw-loader",
-                    },
-                ] as webpack.RuleSetRule[],
-            },
-
-            // plugins
-            plugins: [
-                new CleanWebpackPlugin(),
-                new DefinePlugin({
-                    'process.env.MODERN_BUILD': isModule,
-                    'MODERN_BUILD': isModule,
-                    'process.env.DEBUG': cliConfig.debug,
-                    'DEBUG': cliConfig.debug,
-                }),
-            ],
-        };
-
-        if (!isModule) {
-            configTemplate.module.rules.push({
+        if (!isModule)
+        {
+            (configTemplate.module as webpack.Module).rules.push({
                 // ESLint
                 test: /\.m?jsx?$/,
                 // only lint files that are in the project dir & exclude tests, vendor and node_modules

src/runner/WebpackRunner.ts

@@ -40,39 +40,14 @@ export class WebpackRunner
                 this.logger.log("Launching webpack...");
                 const start = process.hrtime();
 
-                if (this.buildConfig.js.common.watch)
+                if (this.buildConfig.js.watch)
                 {
                     this.resolveCallback = resolve;
                 }
 
-                let configs: webpack.Configuration[] = [];
+                let compiler = webpack(this.buildConfig.js.configs) as webpack.MultiCompiler;
 
-
-                this.buildConfig.js.configs.forEach(config =>
-                {
-                    // 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;
-                    }
-
-                    if (undefined !== config.plugins && this.buildConfig.js.common.plugins)
-                    {
-                        config.plugins.push(...this.buildConfig.js.common.plugins)
-                    }
-
-                    configs.push(
-                        Object.assign(
-                            {},
-                            this.buildConfig.js.common,
-                            config
-                        )
-                    );
-                });
-
-                let compiler = webpack(configs) as webpack.MultiCompiler;
-
-                if (this.buildConfig.js.common.watch)
+                if (this.buildConfig.js.watch)
                 {
                     this.resolveCallback = resolve;
 
@@ -113,12 +88,13 @@ export class WebpackRunner
         stats.stats.forEach(
             singleStats =>
             {
-                console.log("");
                 let type = singleStats.compilation.compiler.options.name as string;
+                let statConfig = singleStats.compilation.compiler.options.stats as any;
+                statConfig.colors = true;
+
+                console.log("");
                 console.log(`${bgCyan(black(" webpack "))} ${cyan(type)}`);
-                console.log(singleStats.toString({
-                    colors: true,
-                }));
+                console.log(singleStats.toString(statConfig));
             }
         );