feat: support webpack v5

Author: Austaras

.yarn-offline-mirror/@babel-plugin-transform-runtime-7.12.10.tgz

@@ -67,8 +67,6 @@
   "dependencies": {
     "@babel/cli": "^7.10.5",
     "@babel/core": "^7.10.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.10.5",
     "@babel/preset-env": "^7.10.4",
     "@babel/runtime": "^7.10.5",
     "babel-loader": "^8.1.0",

package.json

@@ -1,16 +1,17 @@
 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 { ModuleGraph, ChunkGraph } from 'webpack'
+
+import Entrypoint = require('webpack/lib/Entrypoint')
+import Chunk = require('webpack/lib/Chunk')
+import ChunkGroup = require('webpack/lib/ChunkGroup')
+import Module = require('webpack/lib/Module')
 
 import { BabelLoaderCacheDirectoryOption } from './babel.multi.target.options'
 import { BabelTargetOptions } from './babel.target.options'
+import { BabelTargetEntryDependency } from './babel.target.entry.dependency'
 import { BrowserProfileName, StandardBrowserProfileName } from './browser.profile.name'
 import { DEV_SERVER_CLIENT } from './constants'
 import {
-  DEFAULT_BABEL_PLUGINS,
   DEFAULT_BABEL_PRESET_OPTIONS,
   DEFAULT_BROWSERS,
   DEFAULT_TARGET_INFO,
@@ -28,67 +29,6 @@ export type BabelTargetInfo = { [TOption in keyof BabelTargetOptions]: BabelTarg
   readonly options: BabelLoaderTransformOptions
 }
 
-// webpack doesn't actually export things from the `compilation` namespace, so can only use them to
-// type checking, not anything at runtime like instanceof
-// so, need to do this instead
-const SIG = {
-  module: [
-    'disconnect',
-    'unseal',
-    'isEntryModule',
-    'isInChunk',
-  ],
-  entrypoint: [
-    'isInitial',
-    'getFiles',
-    'getRuntimeChunk',
-    'setRuntimeChunk',
-  ],
-  chunk: [
-    'hasRuntime',
-    'canBeInitial',
-    'isOnlyInitial',
-    'hasEntryModule',
-    'addModule',
-    'removeModule',
-    'setModules',
-    'getNumberOfModules',
-    'addGroup',
-    'isInGroup',
-    'canBeIntegrated',
-  ],
-  chunkGroup: [
-    'unshiftChunk',
-    'insertChunk',
-    'pushChunk',
-    'replaceChunk',
-    'isInitial',
-    'addChild',
-    'getChildren',
-    'getNumberOfChildren',
-  ],
-}
-
-function hasSig(obj: any, sig: string[]): boolean {
-  return sig.every(name => typeof obj[name] === 'function')
-}
-
-function isModule(obj: any): obj is Module {
-  return hasSig(obj, SIG.module)
-}
-
-function isEntrypoint(obj: any): obj is Entrypoint {
-  return hasSig(obj, SIG.entrypoint)
-}
-
-function isChunkGroup(obj: any): obj is ChunkGroup {
-  return hasSig(obj, SIG.chunkGroup)
-}
-
-function isChunk(obj: any): obj is Chunk {
-  return hasSig(obj, SIG.chunk)
-}
-
 export class BabelTarget implements BabelTargetInfo {
 
   public readonly profileName: BrowserProfileName
@@ -105,7 +45,11 @@ export class BabelTarget implements BabelTargetInfo {
   }
 
   public getTargetedAssetName(name: string): string {
-    return this.tagAssetsWithKey ? `${name}.${this.key}` : name
+    // sometimes a asset will be targeted twice
+    if (this.tagAssetsWithKey && !name.endsWith(`.${this.key}`)) {
+      return `${name}.${this.key}`
+    }
+    return name
   }
 
   public getTargetedRequest(request: string): string {
@@ -136,21 +80,20 @@ export class BabelTarget implements BabelTargetInfo {
     return targets.find(target => target.key === key)
   }
 
-  public static getTargetFromModule(module: Module): BabelTarget {
-    if (module.options && module.options.babelTarget) {
+  public static getTargetFromModule(module: Module, moduleGraph: ModuleGraph): BabelTarget {
+    if (module.options?.babelTarget) {
       return module.options.babelTarget
     }
 
-    if (!module.reasons) {
-      return undefined
-    }
+    // https://github.com/webpack/webpack/pull/7826/commits/381e2db2009b0020de358c23c702d074806980a5
+    const reasons = Array.from(moduleGraph.getIncomingConnections(module))
 
-    for (const reason of module.reasons) {
-      if (reason.dependency && reason.dependency.babelTarget) {
+    for (const reason of reasons) {
+      if (reason.dependency && reason.dependency instanceof BabelTargetEntryDependency) {
         return reason.dependency.babelTarget
       }
-      if (reason.module) {
-        const target = BabelTarget.getTargetFromModule(reason.module)
+      if (reason.module && reason.module !== module) {
+        const target = BabelTarget.getTargetFromModule(reason.module, moduleGraph)
         if (target) {
           return target
         }
@@ -161,39 +104,41 @@ export class BabelTarget implements BabelTargetInfo {
 
   }
 
-  public static getTargetFromEntrypoint(entrypoint: Entrypoint): BabelTarget {
-    if (!entrypoint.runtimeChunk.hasEntryModule()) {
+  public static getTargetFromEntrypoint(entrypoint: Entrypoint, moduleGraph: ModuleGraph, chunkGraph: ChunkGraph): BabelTarget {
+    const runtime = entrypoint.getRuntimeChunk()
+    const modules = Array.from(chunkGraph.getChunkEntryModulesIterable(runtime))
+    if (modules.length === 0) {
       return undefined
     }
-    return BabelTarget.getTargetFromModule(entrypoint.runtimeChunk.entryModule)
+    return BabelTarget.getTargetFromModule(modules[0], moduleGraph)
   }
 
   // eslint-disable-next-line
   public static getTargetFromGroup(group: ChunkGroup): BabelTarget {
     return undefined
   }
 
-  public static getTargetFromChunk(chunk: Chunk): BabelTarget {
-    if (chunk.entryModule) {
-      return BabelTarget.getTargetFromModule(chunk.entryModule)
+  public static getTargetFromChunk(chunk: Chunk, moduleGraph: ModuleGraph, chunkGraph: ChunkGraph): BabelTarget {
+    const modules = Array.from(chunkGraph.getChunkEntryModulesIterable(chunk))
+    if (modules.length === 0) {
+      return undefined
     }
-
-    return undefined
+    return BabelTarget.getTargetFromModule(modules[0], moduleGraph)
   }
 
-  public static findTarget(source: BabelTargetSource): BabelTarget {
+  public static findTarget(source: BabelTargetSource, moduleGraph: ModuleGraph, chunkGraph: ChunkGraph): BabelTarget {
 
-    if (isModule(source)) {
-      return BabelTarget.getTargetFromModule(source)
+    if (source instanceof Module) {
+      return BabelTarget.getTargetFromModule(source, moduleGraph)
     }
-    if (isEntrypoint(source)) {
-      return BabelTarget.getTargetFromEntrypoint(source)
+    if (source instanceof Entrypoint) {
+      return BabelTarget.getTargetFromEntrypoint(source, moduleGraph, chunkGraph)
     }
-    if (isChunkGroup(source)) {
+    if (source instanceof ChunkGroup) {
       return BabelTarget.getTargetFromGroup(source)
     }
-    if (isChunk(source)) {
-      return BabelTarget.getTargetFromChunk(source)
+    if (source instanceof Chunk) {
+      return BabelTarget.getTargetFromChunk(source, moduleGraph, chunkGraph)
     }
 
     return undefined
@@ -228,18 +173,14 @@ export class BabelTargetFactory {
 
   public createTransformOptions(key: string, browsers: string[], loaderOptions: { cacheDirectory?: BabelLoaderCacheDirectoryOption }): BabelLoaderTransformOptions {
 
-    const mergedPresetOptions: BabelPresetOptions = Object.assign(
-      {},
-      DEFAULT_BABEL_PRESET_OPTIONS,
-      this.presetOptions,
-      {
-        targets: {
-          browsers,
-        },
-      }, {
-        modules: false,
+    const mergedPresetOptions: BabelPresetOptions = {
+      ...DEFAULT_BABEL_PRESET_OPTIONS,
+      ...this.presetOptions,
+      targets: {
+        browsers,
       },
-    )
+      modules: false,
+    }
 
     const cacheDirectory = this.getCacheDirectory(key, loaderOptions.cacheDirectory)
 
@@ -249,7 +190,7 @@ export class BabelTargetFactory {
         ...this.presets,
       ],
       plugins: [
-        ...DEFAULT_BABEL_PLUGINS,
+        // https://github.com/babel/babel/issues/10271#issuecomment-528379505
         ...this.plugins,
       ],
       cacheDirectory,

src/babel-target.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,13 @@ 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 +77,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
@@ -94,18 +88,16 @@ 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' as any
+      htmlWebpackPlugin.userOptions.chunksSortMode = 'none'
 
-      if ((htmlWebpackPlugin.options.chunks as any) !== 'all' &&
-        htmlWebpackPlugin.options.chunks &&
-        htmlWebpackPlugin.options.chunks.length
+      if ((htmlWebpackPlugin.userOptions.chunks) !== 'all' &&
+        htmlWebpackPlugin.userOptions.chunks?.length
       ) {
-        htmlWebpackPlugin.options.chunks = this.mapChunkNames(htmlWebpackPlugin.options.chunks as string[])
+        htmlWebpackPlugin.userOptions.chunks = this.mapChunkNames(htmlWebpackPlugin.userOptions.chunks as string[])
       }
 
-      if (htmlWebpackPlugin.options.excludeChunks &&
-        htmlWebpackPlugin.options.excludeChunks.length) {
-        htmlWebpackPlugin.options.excludeChunks = this.mapChunkNames(htmlWebpackPlugin.options.excludeChunks)
+      if (htmlWebpackPlugin.userOptions.excludeChunks?.length) {
+        htmlWebpackPlugin.userOptions.excludeChunks = this.mapChunkNames(htmlWebpackPlugin.userOptions.excludeChunks)
       }
 
       compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation: Compilation) => {
@@ -114,20 +106,20 @@ 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 hash = compilation.hash
+            const publicPath = compilation.getAssetPath(compilation.outputOptions.publicPath, { hash })
             const chunkMap: TargetedChunkMap = compilation.chunkGroups.reduce((result: TargetedChunkMap, chunkGroup: ChunkGroup) => {
               chunkGroup.chunks.forEach((chunk: Chunk) => {
                 chunk.files.forEach((file: string) => {
-                  result.set(file, chunkGroup, chunk)
+                  result.set(file, chunkGroup, chunk, compilation.chunkGraph, compilation.moduleGraph)
                 })
               })
               return result
-            }, new TargetedChunkMap(compiler.options.output.publicPath))
-            this.updateScriptTags(chunkMap, getHeadTags(htmlPluginData))
-            this.updateScriptTags(chunkMap, getBodyTags(htmlPluginData))
+            }, new TargetedChunkMap(publicPath))
+            this.updateScriptTags(chunkMap, htmlPluginData.headTags)
+            this.updateScriptTags(chunkMap, htmlPluginData.bodyTags)
             return htmlPluginData
           })
 

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

@@ -1,14 +1,43 @@
-import { BabelTarget } from './babel-target'
+import ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
 
-import Dependency = require('webpack/lib/Dependency')
+import { BabelTarget } from './babel-target'
+import { DEV_SERVER_CLIENT } from './constants'
 
-export interface EntryLoc {
+interface EntryLoc {
   name: string
   index?: number
 }
 
-export interface BabelTargetEntryDependency extends Dependency {
-  babelTarget: BabelTarget
-  loc: EntryLoc
-  name: string
+// TODO what's makeSerializable?
+export class BabelTargetEntryDependency extends ModuleDependency {
+
+  public name: string
+  public loc: EntryLoc
+
+  // @ts-ignore
+  // webpack official typing is wrong
+  public get type(): string {
+    return 'babel target entry'
+  }
+
+  public getResourceIdentifier(): string {
+    return `module${this.request}!${this.babelTarget.key}`
+  }
+  
+  // @ts-ignore
+  public get category(): string {
+    return 'esm'
+  }
+
+  constructor(public babelTarget: BabelTarget, request: string, public originalName: string, loc?: EntryLoc) {
+    super(`${request.startsWith(DEV_SERVER_CLIENT) ? request : babelTarget.getTargetedRequest(request)}`)
+
+    this.name = babelTarget.getTargetedAssetName(originalName)
+    if (!loc) {
+      loc = { name: `${this.request}:${babelTarget.key}` }
+    } else {
+      loc.name += `:${babelTarget.key}`
+    }
+    this.loc = loc
+  }
 }