feat: support htmlwebpackplugin v4

package.json

@@ -58,7 +58,7 @@
     "e2e-ci": "TS_NODE_PROJECT=tsconfig.e2e.json TS_NODE_FILES=true DOTENV_CONFIG_PATH=examples/.env node -r dotenv/config -r ts-node/register node_modules/.bin/protractor examples/protractor.conf.js"
   },
   "peerDependencies": {
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^3.2.0 || ^4.0.0-beta.1",
     "webpack": "^4.19.0",
     "webpack-dev-server": "^3.1.0"
   },
@@ -75,9 +75,6 @@
     "webpack-merge": "^4.2.1",
     "webpack-sources": "^1.3.0"
   },
-  "optionalDependencies": {
-    "html-webpack-plugin": "^3.2.0"
-  },
   "devDependencies": {
     "@types/babel-core": "^6.25.5",
     "@types/chai": "^4.1.7",

src/babel.multi.target.html.updater.ts

@@ -2,6 +2,7 @@ import { AlterAssetTagsData, HtmlTag, HtmlWebpackPlugin } from 'html-webpack-plu
 import { compilation, Compiler, Plugin } from 'webpack'
 
 import { BabelTarget } from './babel-target'
+import { getAlterAssetTags, getHeadTags, getBodyTags } from './html-webpack-plugin.polyfill'
 import { PLUGIN_NAME } from './plugin.name'
 import { TargetedChunkMap } from './targeted.chunk'
 import Chunk = compilation.Chunk
@@ -89,7 +90,7 @@ export class BabelMultiTargetHtmlUpdater implements Plugin {
 
       // not sure if this is a problem since webpack will wait for dependencies to load, but sorting
       // by auto/dependency will result in a cyclic dependency error for lazy-loaded routes
-      htmlWebpackPlugin.options.chunksSortMode = 'none'
+      htmlWebpackPlugin.options.chunksSortMode = 'none' as any
 
       if ((htmlWebpackPlugin.options.chunks as any) !== 'all' &&
         htmlWebpackPlugin.options.chunks &&
@@ -109,9 +110,10 @@ export class BabelMultiTargetHtmlUpdater implements Plugin {
           return
         }
 
-        compilation.hooks.htmlWebpackPluginAlterAssetTags.tapPromise(`${PLUGIN_NAME} update asset tags`,
-          async (htmlPluginData: AlterAssetTagsData) => {
+        const hook = getAlterAssetTags(compilation)
 
+        hook.tapPromise(`${PLUGIN_NAME} update asset tags`,
+          async (htmlPluginData: AlterAssetTagsData) => {
             const chunkMap: TargetedChunkMap = compilation.chunkGroups.reduce((result: TargetedChunkMap, chunkGroup: ChunkGroup) => {
               chunkGroup.chunks.forEach((chunk: Chunk) => {
                 chunk.files.forEach((file: string) => {
@@ -120,12 +122,9 @@ export class BabelMultiTargetHtmlUpdater implements Plugin {
               })
               return result
             }, new TargetedChunkMap(compiler.options.output.publicPath))
-
-            this.updateScriptTags(chunkMap, htmlPluginData.head)
-            this.updateScriptTags(chunkMap, htmlPluginData.body)
-
+            this.updateScriptTags(chunkMap, getHeadTags(htmlPluginData))
+            this.updateScriptTags(chunkMap, getBodyTags(htmlPluginData))
             return htmlPluginData
-
           })
 
       })

src/html-webpack-plugin.polyfill.ts

@@ -0,0 +1,16 @@
+import { getHooks, AlterAssetTagsData, HtmlTag } from 'html-webpack-plugin'
+import { compilation } from 'webpack'
+import Compilation = compilation.Compilation
+
+const isV4 = typeof getHooks !== 'undefined'
+
+export const getBodyTags = (data: AlterAssetTagsData): HtmlTag[] =>
+  isV4 ? (data as any).bodyTags : data.body
+export const setBodyTags = (data: AlterAssetTagsData, body: HtmlTag[]): void => {
+  isV4 ? (data as any).bodyTags = body : data.body = body
+}
+export const getHeadTags = (data: AlterAssetTagsData): HtmlTag[] =>
+  isV4 ? (data as any).headTags : data.head
+
+export const getAlterAssetTags = (compilation: Compilation): any =>
+  isV4 ? getHooks(compilation).alterAssetTagGroups : compilation.hooks.htmlWebpackPluginAlterAssetTags

src/normalize.module.ids.plugin.ts

@@ -4,6 +4,7 @@ import { Compiler, Module, Plugin, compilation } from 'webpack'
 import Compilation = compilation.Compilation;
 
 import { BabelTarget } from './babel-target'
+import { getAlterAssetTags, getBodyTags, setBodyTags } from './html-webpack-plugin.polyfill'
 
 export class NormalizeModuleIdsPlugin implements Plugin {
 
@@ -81,13 +82,16 @@ export class NormalizeModuleIdsPlugin implements Plugin {
           return
         }
 
-        compilation.hooks.htmlWebpackPluginAlterAssetTags.tapPromise(this.pluginName('reorder asset tags'),
+        const hook = getAlterAssetTags(compilation)
+
+        hook.tapPromise(this.pluginName('reorder asset tags'),
           async (htmlPluginData: AlterAssetTagsData) => {
 
-            const tags = htmlPluginData.body.slice(0)
+            const body = getBodyTags(htmlPluginData)
+            const tags = body.slice(0)
 
             // re-sort the tags so that es module tags are rendered first, otherwise maintaining the original order
-            htmlPluginData.body.sort((a: HtmlTag, b: HtmlTag) => {
+            body.sort((a: HtmlTag, b: HtmlTag) => {
               const aIndex = tags.indexOf(a)
               const bIndex = tags.indexOf(b)
               if (a.tagName !== 'script' || b.tagName !== 'script' ||
@@ -104,12 +108,13 @@ export class NormalizeModuleIdsPlugin implements Plugin {
               return 1
             })
 
-            htmlPluginData.body.forEach((tag: HtmlTag) => {
+            body.forEach((tag: HtmlTag) => {
               if (tag.tagName === 'script' && tag.attributes && tag.attributes.nomodule) {
                 tag.attributes.defer = true
               }
             })
 
+            setBodyTags(htmlPluginData, body)
 
             return htmlPluginData
 

src/types/html-webpack-plugin.d.ts

@@ -62,7 +62,7 @@ declare module 'html-webpack-plugin' {
   }
 
   type EmitData = HtmlWebpackPluginData & HtmlData;
-
+  const getHooks: any
 }
 
 declare module 'webpack' {