Feature: Customize Webpack HTML

This changeset adds options to entrypoints to support customized operation of the `HtmlWebpackPlugin`. See below for full changeset. Changes enclosed: - Add properties for `output`, `htmlPlugins`, and `htmlOptions` to `WebpackPluginEntryPoint` - Use new options from `Config.ts`, by merging them into their expected places Fixes and closes electron#2968.
sgammon · Oct 16, 2022 · 0ba5296 · 0ba5296
1 parent 362099a
commit 0ba5296
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/packages/plugin/webpack/src/Config.ts b/packages/plugin/webpack/src/Config.ts
@@ -1,6 +1,7 @@
-import { Configuration as RawWebpackConfiguration } from 'webpack';
+import { Configuration as RawWebpackConfiguration, Output as WebpackOutput, Plugin as WebpackPlugin } from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import { ConfigurationFactory as WebpackConfigurationFactory } from './WebpackConfig';
+import { HtmlWebpackPlugin } from 'html-webpack-plugin';
 
 export interface WebpackPluginEntryPoint {
   /**
@@ -48,6 +49,20 @@ export interface WebpackPluginEntryPoint {
    * for all entries.
    */
   nodeIntegration?: boolean;
+  /**
+   * Custom options to merge into the configuration passed to `HtmlWebpackPlugin`.
+   */
+  htmlOptions?: Partial<HtmlWebpackPlugin.Options>;
+  /**
+   * Plugins to include before `HtmlWebpackPlugin`; typically, HTML plugin add-ons will
+   * need to be placed here.
+   */
+  htmlPlugins?: WebpackPlugin[];
+  /**
+   * Additional options to merge into the Webpack `output` configuration for this entry-
+   * point.
+   */
+  output?: WebpackOutput;
 }
 
 export interface WebpackPreloadEntryPoint {

diff --git a/packages/plugin/webpack/src/WebpackConfig.ts b/packages/plugin/webpack/src/WebpackConfig.ts
@@ -194,25 +194,32 @@ export default class WebpackConfigGenerator {
           target: this.rendererTarget(entryPoint),
           devtool: this.rendererSourceMapOption,
           mode: this.mode,
-          output: {
+          output: Object.assign(entryPoint.output || {}, {
             path: path.resolve(this.webpackDir, 'renderer'),
             filename: '[name]/index.js',
             globalObject: 'self',
             ...(this.isProd ? {} : { publicPath: '/' }),
-          },
+          }),
           node: {
             __dirname: false,
             __filename: false,
           },
           plugins: [
+            ...(entryPoint.htmlPlugins || []),
             ...(entryPoint.html
               ? [
-                  new HtmlWebpackPlugin({
-                    title: entryPoint.name,
-                    template: entryPoint.html,
-                    filename: `${entryPoint.name}/index.html`,
-                    chunks: [entryPoint.name].concat(entryPoint.additionalChunks || []),
-                  }) as WebpackPluginInstance,
+                  new HtmlWebpackPlugin(
+                    Object.assign(
+                      {},
+                      {
+                        title: entryPoint.name,
+                        template: entryPoint.html,
+                        filename: `${entryPoint.name}/index.html`,
+                        chunks: [entryPoint.name].concat(entryPoint.additionalChunks || []),
+                      },
+                      entryPoint.htmlOptions || {}
+                    )
+                  ) as WebpackPluginInstance,
                 ]
               : []),
             new webpack.DefinePlugin(defines),