refactor: lazy loading for html-wepback-plugin

Author: fstylermiller

app-config-webpack/src/index.test.ts

@@ -1,5 +1,5 @@
 import { resolve, join } from 'path';
-import webpack from 'webpack';
+import webpack, { Compiler } from 'webpack';
 import HtmlPlugin from 'html-webpack-plugin';
 import AppConfigPlugin, { regex, loader, Options } from './index';
 
@@ -47,6 +47,37 @@ describe('frontend-webpack-project example', () => {
     });
   });
 
+  it('should throw an error if html-webpack-plugin is not available and headerInjection is true', () => {
+    process.env.APP_CONFIG = JSON.stringify({ externalApiUrl: 'https://localhost:3999' });
+    jest.isolateModules(async () => {
+      jest.mock('html-webpack-plugin', () => {
+        throw new Error('html-webpack-plugin not found');
+      });
+
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+
+      try {
+        await new Promise<void>((done, reject) => {
+          webpack([createOptions({ headerInjection: true })], (err, stats) => {
+            if (err) return reject(err);
+            if (!stats) return reject(new Error('no stats'));
+            if (stats.hasErrors()) reject(stats.toString());
+            done();
+          });
+        });
+      } catch (err) {
+        expect(consoleErrorSpy).toHaveBeenCalledTimes(3);
+        expect(consoleErrorSpy).toHaveBeenCalledWith('html-webpack-plugin not found');
+        expect(consoleErrorSpy).toHaveBeenCalledWith('Failed to resolve html-webpack-plugin');
+        expect(consoleErrorSpy).toHaveBeenCalledWith(
+          'Either include the module in your dependencies and enable the webpack plugin, or set headerInjection to false in your configuration.',
+        );
+      } finally {
+        consoleErrorSpy.mockRestore();
+      }
+    });
+  });
+
   it('reads environment variable for app-config', async () => {
     process.env.APP_CONFIG = JSON.stringify({ externalApiUrl: 'https://localhost:3999' });
 

app-config-webpack/src/index.ts

@@ -1,6 +1,5 @@
 import { join } from 'path';
 import { Compiler } from 'webpack';
-import HtmlWebpackPlugin, { HtmlTagObject } from 'html-webpack-plugin';
 import type { ConfigLoadingOptions, SchemaLoadingOptions } from '@app-config/main';
 
 import { regex } from './loader';
@@ -87,28 +86,35 @@ export default class AppConfigPlugin implements Options {
 
   injectHead(compiler: Compiler) {
     compiler.hooks.compilation.tap('AppConfigPlugin', (compilation) => {
-      HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapPromise(
-        'AppConfigPlugin',
-        async ({ headTags, ...html }) => {
-          // remove placeholder <script id="app-config"></script> if it exists
-          const newTags: HtmlTagObject[] = headTags.filter(
-            ({ attributes }) => attributes.id !== 'app-config',
-          );
-
-          newTags.push({
-            tagName: 'script',
-            attributes: { id: 'app-config', type: 'text/javascript' },
-            innerHTML: ``,
-            voidTag: false,
-            meta: {},
-          });
-
-          return {
-            ...html,
-            headTags: newTags,
-          };
-        },
-      );
+      import('html-webpack-plugin').then((module) => {
+        const HtmlWebpackPlugin = module.default;
+        HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapPromise(
+          'AppConfigPlugin',
+          async ({ headTags, ...html }) => {
+            // remove placeholder <script id="app-config"></script> if it exists
+            const newTags = headTags.filter(
+              ({ attributes }) => attributes.id !== 'app-config',
+            );
+
+            newTags.push({
+              tagName: 'script',
+              attributes: { id: 'app-config', type: 'text/javascript' },
+              innerHTML: ``,
+              voidTag: false,
+              meta: {},
+            });
+
+            return {
+              ...html,
+              headTags: newTags,
+            };
+          },
+        );
+      }).catch((error) => {
+        console.error(error.message);
+        console.error('Failed to resolve html-webpack-plugin');
+        console.error('Either include the module in your dependencies and enable the webpack plugin, or set headerInjection to false in your configuration.');
+      });
     });
   }
 }