build(deps): upgrade to webpack 5 and remove redundant typing

package.json

@@ -59,9 +59,9 @@
   },
   "peerDependencies": {
     "core-js": "^2.6.3 || ^3.6.5",
-    "html-webpack-plugin": "^3.2.0 || ^4.0.0",
+    "html-webpack-plugin": "^4.0.0",
     "terser": ">=3.12.0",
-    "webpack": "^4.19.0",
+    "webpack": "^5.0.0",
     "webpack-dev-server": "^3.1.0"
   },
   "dependencies": {
@@ -73,9 +73,9 @@
     "@babel/runtime": "^7.10.5",
     "babel-loader": "^8.1.0",
     "core-js": "^3.6.5",
-    "tapable": "^1.1.3",
+    "tapable": "^2.0.0",
     "webpack-merge": "^5.0.9",
-    "webpack-sources": "^1.4.3"
+    "webpack-sources": "^2.0.1"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.10.4",
@@ -90,12 +90,10 @@
     "@types/mocha": "^5.2.5",
     "@types/node": "^12.12.53",
     "@types/sinon-chai": "^3.2.4",
-    "@types/tapable": "^1.0.6",
-    "@types/webpack": "^4.41.21",
     "@types/webpack-dev-middleware": "^3.7.1",
     "@types/webpack-dev-server": "^3.11.0",
     "@types/webpack-merge": "^4.1.5",
-    "@types/webpack-sources": "^1.4.1",
+    "@types/webpack-sources": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
     "acorn": "^6.0.5",
@@ -136,11 +134,8 @@
     "ts-custom-error-shim": "^1.0.2",
     "ts-node": "^8.10.2",
     "typescript": "^3.9.7",
-    "webpack": "^4.44.0",
+    "webpack": "^5.0.0",
     "webpack-dev-middleware": "^3.7.2",
     "webpack-dev-server": "^3.11.0"
-  },
-  "resolutions": {
-    "@types/webpack": "^4.41.21"
   }
 }

src/babel-target.ts

@@ -1,9 +1,9 @@
 import { BabelLoaderTransformOptions, BabelPresetOptions } from 'babel-loader'
 import * as webpack from 'webpack'
-import Chunk = webpack.compilation.Chunk
-import ChunkGroup = webpack.compilation.ChunkGroup
-import Entrypoint = webpack.compilation.Entrypoint
-import Module = webpack.compilation.Module
+import Chunk = webpack.Chunk
+import ChunkGroup = webpack.ChunkGroup
+import Entrypoint = webpack.Entrypoint
+import Module = webpack.Module
 
 import { BabelLoaderCacheDirectoryOption } from './babel.multi.target.options'
 import { BabelTargetOptions } from './babel.target.options'

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

@@ -1,13 +1,9 @@
-import { AlterAssetTagsData, HtmlTag, HtmlWebpackPlugin } from 'html-webpack-plugin'
-import { compilation, Compiler, Plugin } from 'webpack'
+import { getHooks, HtmlTagObject } from 'html-webpack-plugin'
+import { Chunk, ChunkGroup, 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
-import ChunkGroup = compilation.ChunkGroup
-import Compilation = compilation.Compilation
 
 // Works with HtmlWebpackPlugin to make sure the targeted assets are referenced correctly
 // Tags for assets whose target has `esModule` set are updated with the `"type"="module"` attribute
@@ -20,15 +16,15 @@ export class BabelMultiTargetHtmlUpdater implements Plugin {
 
   constructor(private targets: BabelTarget[]) {}
 
-  public updateScriptTags(chunkMap: TargetedChunkMap, tags: HtmlTag[]): void {
+  public updateScriptTags(chunkMap: TargetedChunkMap, tags: HtmlTagObject[]): void {
 
     tags
-      .forEach((tag: HtmlTag) => {
+      .forEach((tag: HtmlTagObject) => {
         if (tag.tagName !== 'script') {
           return
         }
 
-        const targetedChunks = chunkMap.get(tag.attributes.src)
+        const targetedChunks = chunkMap.get(tag.attributes.src as string)
         // chunks that are added outside of an entry point (e.g. by HtmlWebpackIncludeAssetsPlugin) will not be targeted
         if (!targetedChunks) {
           return
@@ -83,7 +79,7 @@ export class BabelMultiTargetHtmlUpdater implements Plugin {
   public apply(compiler: Compiler): void {
 
     compiler.hooks.afterPlugins.tap(PLUGIN_NAME, () => {
-      const htmlWebpackPlugin: HtmlWebpackPlugin = compiler.options.plugins
+      const htmlWebpackPlugin = compiler.options.plugins
       // instanceof can act wonky since we don't actually keep our own dependency on html-webpack-plugin
       // should we?
         .find(plugin => plugin.constructor.name === 'HtmlWebpackPlugin') as any
@@ -114,10 +110,8 @@ export class BabelMultiTargetHtmlUpdater implements Plugin {
           return
         }
 
-        const hook = getAlterAssetTags(compilation)
-
-        hook.tapPromise(`${PLUGIN_NAME} update asset tags`,
-          async (htmlPluginData: AlterAssetTagsData) => {
+        getHooks(compilation).alterAssetTagGroups.tapPromise(`${PLUGIN_NAME} update asset tags`,
+          async (htmlPluginData) => {
             const chunkMap: TargetedChunkMap = compilation.chunkGroups.reduce((result: TargetedChunkMap, chunkGroup: ChunkGroup) => {
               chunkGroup.chunks.forEach((chunk: Chunk) => {
                 chunk.files.forEach((file: string) => {
@@ -126,8 +120,8 @@ export class BabelMultiTargetHtmlUpdater implements Plugin {
               })
               return result
             }, new TargetedChunkMap(compiler.options.output.publicPath))
-            this.updateScriptTags(chunkMap, getHeadTags(htmlPluginData))
-            this.updateScriptTags(chunkMap, getBodyTags(htmlPluginData))
+            this.updateScriptTags(chunkMap, htmlPluginData.headTags)
+            this.updateScriptTags(chunkMap, htmlPluginData.bodyTags)
             return htmlPluginData
           })
 

src/babel.target.entry.plugin.ts

@@ -1,7 +1,4 @@
-import { compilation, Compiler, Plugin } from 'webpack'
-import Compilation = compilation.Compilation
-import Dependency = compilation.Dependency
-import NormalModuleFactory = compilation.NormalModuleFactory
+import { Compiler, Plugin, Compilation, Dependency, NormalModuleFactory } from 'webpack'
 
 import { BabelTarget }                      from './babel-target'
 import { BabelTargetSingleEntryDependency } from './babel.target.single.entry.dependency'
@@ -16,7 +13,7 @@ export abstract class BabelTargetEntryPlugin implements Plugin {
     compiler.hooks.compilation.tap(
       this.constructor.name,
       (compilation: Compilation, { normalModuleFactory }: { normalModuleFactory: NormalModuleFactory }) => {
-        (compilation.dependencyFactories as Map<any, any>).set(
+        compilation.dependencyFactories.set(
           BabelTargetSingleEntryDependency,
           normalModuleFactory,
         )

src/babel.target.multi.entry.plugin.ts

@@ -1,6 +1,4 @@
-import { compilation, Compiler } from 'webpack'
-import Compilation = compilation.Compilation
-import NormalModuleFactory = compilation.NormalModuleFactory
+import { Compilation, Compiler, NormalModuleFactory } from 'webpack'
 import MultiModuleFactory = require('webpack/lib/MultiModuleFactory')
 import SingleEntryDependency = require('webpack/lib/dependencies/SingleEntryDependency')
 

src/babel.target.single.entry.plugin.ts

@@ -1,5 +1,4 @@
-import { compilation, Compiler } from 'webpack'
-import Compilation = compilation.Compilation;
+import { Compilation, Compiler } from 'webpack'
 
 import { BabelTarget }                      from './babel-target'
 import { BabelTargetEntryDependency }       from './babel.target.entry.dependency'

src/named.lazy.chunks.plugin.ts

@@ -1,8 +1,4 @@
-import { compilation, Compiler, Plugin } from 'webpack'
-
-import Chunk = compilation.Chunk;
-import Compilation = compilation.Compilation;
-import Origin = compilation.Origin;
+import { Chunk, Compilation, Compiler, Plugin, Entrypoint } from 'webpack'
 
 import { BabelTarget } from './babel-target'
 
@@ -19,11 +15,12 @@ export class NamedLazyChunksPlugin implements Plugin {
       if (!group.origins) {
         return
       }
-      if (group.runtimeChunk === chunk) {
-        result.origins = [ group.runtimeChunk.entryModule.reasons[0].dependencies.originalName ]
+      if ((group as Entrypoint).runtimeChunk === chunk) {
+        // TODO did this actually get called?
+        result.origins = [ (group as Entrypoint).runtimeChunk.entryModule.reasons[0].dependencies.originalName ]
         result.isEntry = true
       }
-      group.origins.forEach((origin: Origin) => {
+      group.origins.forEach((origin) => {
         const isLazyModule = origin.module && origin.module.options && origin.module.options.mode === 'lazy'
         const isNgFactory = origin.request && origin.request.match(/\.ngfactory(?:\?babel-target=\w+)?$/)
         if (!isLazyModule && !isNgFactory) {

src/normalize.css.chunks.plugin.ts

@@ -1,8 +1,5 @@
-import { compilation, Compiler, Plugin } from 'webpack'
-
-import Chunk = compilation.Chunk;
-import Compilation = compilation.Compilation;
-import Module = compilation.Module;
+import { Chunk, Compilation, Module, Compiler, Plugin } from 'webpack'
+import { STAGE_BASIC } from 'webpack/lib/OptimizationStages'
 
 import { BabelTarget } from './babel-target'
 import { PLUGIN_NAME } from './plugin.name'
@@ -27,7 +24,10 @@ export class NormalizeCssChunksPlugin implements Plugin {
         return
       }
 
-      compilation.hooks.optimizeChunksBasic.tap(PLUGIN_NAME, this.extractCssChunks.bind(this, compilation))
+      compilation.hooks.optimizeChunks.tap({
+        name: PLUGIN_NAME,
+        stage: STAGE_BASIC,
+      }, this.extractCssChunks.bind(this, compilation))
       compilation.hooks.optimizeChunkAssets.tap(PLUGIN_NAME, this.cleanCssChunks.bind(this, compilation))
 
     })
@@ -66,8 +66,7 @@ export class NormalizeCssChunksPlugin implements Plugin {
         cssModules[name] = new Set<Module>()
       }
 
-      chunk.modulesIterable.forEach(module => {
-
+      for (const module of chunk.modulesIterable) {
         if (module.constructor.name !== 'CssModule') {
           return
         }
@@ -76,8 +75,7 @@ export class NormalizeCssChunksPlugin implements Plugin {
 
         // don't duplicate modules - we should only have one per imported/required CSS/SCSS/etc file
         cssModules[name].add(module)
-
-      })
+      }
     })
 
     if (hasUntaggedTarget) {
@@ -159,14 +157,14 @@ export class NormalizeCssChunksPlugin implements Plugin {
         return
       }
 
-      chunk.files = chunk.files.reduce((result, file) => {
+      chunk.files = new Set([...chunk.files].reduce((result, file) => {
         if (file.endsWith('.js')) {
           delete compilation.assets[file]
         } else {
           result.push(file)
         }
         return result
-      }, [])
+      }, []))
     })
   }
 

src/normalize.module.ids.plugin.ts

@@ -1,11 +1,8 @@
-import { AlterAssetTagsData, HtmlTag, HtmlWebpackPlugin } from 'html-webpack-plugin'
-import { Compiler, Plugin } from 'webpack'
-import * as webpack from 'webpack'
-import Compilation = webpack.compilation.Compilation
-import Module = webpack.compilation.Module
+import { HtmlTagObject, getHooks } from 'html-webpack-plugin'
+import HtmlWebpackPlugin = require('html-webpack-plugin')
+import { Compiler, Compilation, Module, Plugin } from 'webpack'
 
 import { BabelTarget } from './babel-target'
-import { getAlterAssetTags, getBodyTags, setBodyTags } from './html-webpack-plugin.polyfill'
 
 export class NormalizeModuleIdsPlugin implements Plugin {
 
@@ -84,16 +81,15 @@ export class NormalizeModuleIdsPlugin implements Plugin {
           return
         }
 
-        const hook = getAlterAssetTags(compilation)
-
-        hook.tapPromise(this.pluginName('reorder asset tags'),
-          async (htmlPluginData: AlterAssetTagsData) => {
+        // TODO will this work?
+        getHooks(compilation).alterAssetTagGroups.tapPromise(this.pluginName('reorder asset tags'),
+          async (htmlPluginData) => {
 
-            const body = getBodyTags(htmlPluginData)
+            const body = htmlPluginData.bodyTags
             const tags = body.slice(0)
 
             // re-sort the tags so that es module tags are rendered first, otherwise maintaining the original order
-            body.sort((a: HtmlTag, b: HtmlTag) => {
+            body.sort((a: HtmlTagObject, b: HtmlTagObject) => {
               const aIndex = tags.indexOf(a)
               const bIndex = tags.indexOf(b)
               if (a.tagName !== 'script' || b.tagName !== 'script' ||
@@ -110,13 +106,13 @@ export class NormalizeModuleIdsPlugin implements Plugin {
               return 1
             })
 
-            body.forEach((tag: HtmlTag) => {
+            body.forEach((tag: HtmlTagObject) => {
               if (tag.tagName === 'script' && tag.attributes && tag.attributes.nomodule) {
                 tag.attributes.defer = true
               }
             })
 
-            setBodyTags(htmlPluginData, body)
+            htmlPluginData.bodyTags = body
 
             return htmlPluginData
 

src/safari-nomodule-fix/safari.nomodule.fix.plugin.ts

@@ -1,13 +1,11 @@
 import { readFileSync } from 'fs'
 import { resolve } from 'path'
 
-import { AlterAssetTagsData, HtmlTag, HtmlWebpackPlugin } from 'html-webpack-plugin'
-import * as webpack from 'webpack'
-import { Compiler, Plugin } from 'webpack'
+import { getHooks, HtmlTagObject } from 'html-webpack-plugin'
+import HtmlWebpackPlugin = require('html-webpack-plugin')
+import { Compiler, Compilation, Plugin } from 'webpack'
 import { RawSource } from 'webpack-sources'
-import * as terser from 'terser';
-
-import Compilation = webpack.compilation.Compilation
+import * as terser from 'terser'
 
 import { SafariNoModuleFixMode, SafariNoModuleFixInject, SafariNoModuleFixOption, SafariNoModuleFixOptionMap } from '../babel.multi.target.options'
 import { PLUGIN_NAME } from '../plugin.name'
@@ -25,8 +23,7 @@ export class SafariNoModuleFixPlugin implements Plugin {
       this.mode = typeof options.mode !== 'undefined' ? options.mode : true
       this.inject = options.inject ? options.inject : SafariNoModuleFixInject.head
       this.minify = !!options.minify
-    }
-    else {
+    } else {
       this.mode = option as (boolean | SafariNoModuleFixMode)
       this.inject = SafariNoModuleFixInject.head
       this.minify = false
@@ -123,20 +120,22 @@ export class SafariNoModuleFixPlugin implements Plugin {
         return
       }
 
-      compilation.hooks.htmlWebpackPluginAlterAssetTags.tapPromise(`${PLUGIN_NAME} add safari nomodule fix tags`,
-        async (htmlPluginData: AlterAssetTagsData) => {
-          const element = this.inject === SafariNoModuleFixInject.body ? htmlPluginData.body : htmlPluginData.head
+      getHooks(compilation).alterAssetTagGroups.tapPromise(`${PLUGIN_NAME} add safari nomodule fix tags`,
+        async (htmlPluginData) => {
+          const element = this.inject === SafariNoModuleFixInject.body ? htmlPluginData.bodyTags : htmlPluginData.headTags
           element.unshift(this.createSafariNoModuleFixTag())
           return htmlPluginData
         })
 
     })
   }
 
-  private createSafariNoModuleFixTag(): HtmlTag {
+  private createSafariNoModuleFixTag(): HtmlTagObject {
 
-    const tag: HtmlTag  = {
+    const tag: HtmlTagObject = {
       tagName: 'script',
+      // TODO
+      // @ts-ignore 
       closeTag: true,
       attributes: {
         nomodule: true,

src/targeted.chunk.ts

@@ -1,6 +1,4 @@
-import * as webpack from 'webpack'
-import Chunk = webpack.compilation.Chunk;
-import ChunkGroup = webpack.compilation.ChunkGroup;
+import { Chunk, ChunkGroup, PublicPath } from 'webpack'
 
 import { BabelTarget } from './babel-target'
 
@@ -29,7 +27,7 @@ export class TargetedChunkMap {
     private innerMap: { [key: string]: TargetedChunk[] } = {};
     private targetedChunks: { [hash: string]: TargetedChunk } = {};
 
-    constructor(private publicPath: string) {
+    constructor(private publicPath: PublicPath) {
       if (typeof(this.publicPath) === 'undefined') {
         this.publicPath = ''
       }