feat: add ability to customize HtmlWebpackPlugin options

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
- Add tests to cover new options

Fixes and closes electron#2968.

Author: sgammon

packages/plugin/webpack/src/Config.ts

@@ -1,6 +1,7 @@
-import { Configuration as RawWebpackConfiguration } from 'webpack';
+import { Configuration as RawWebpackConfiguration, WebpackPluginInstance } 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?: WebpackPluginInstance[];
+  /**
+   * Additional options to merge into the Webpack `output` configuration for this entry-
+   * point.
+   */
+  output?: object;
 }
 
 export interface WebpackPreloadEntryPoint {

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),

packages/plugin/webpack/test/WebpackConfig_spec.ts

@@ -643,6 +643,37 @@ describe('WebpackConfigGenerator', () => {
         await generator.getRendererConfig(config.renderer.entryPoints);
         expect(getInvokedCounter()).to.equal(2);
       });
+
+      it('honors custom entrypoint output options', async () => {
+        const { MyWebpackConfigGenerator } = makeSubclass();
+
+        const config = {
+          mainConfig: () => ({
+            entry: 'main.js',
+            ...sampleWebpackConfig,
+          }),
+          renderer: {
+            config: { ...sampleWebpackConfig },
+            entryPoints: [
+              {
+                name: 'main',
+                js: 'rendererScript.js',
+                output: {
+                  crossorigin: 'anonymous',
+                },
+              },
+            ],
+          },
+        } as WebpackPluginConfig;
+
+        const generator = new MyWebpackConfigGenerator(config, mockProjectDir, false, 3000);
+
+        const rendererConfig = await generator.getRendererConfig(config.renderer.entryPoints);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const outputSettings = rendererConfig[0].output as any;
+        expect(outputSettings).not.to.be.undefined;
+        expect(outputSettings['crossorigin']).to.equal('anonymous');
+      });
     });
   });
 });