feat: support webpack5 and html-webpack-plugin5 (#14)

Co-authored-by: Haoqun Jiang <[email protected]>

Author: githoniel

.eslintignore

@@ -1,4 +1,4 @@
 build/
 demo/
 test/fixtures/
-test/*/node_modules/
+test/**/node_modules/

.gitignore

@@ -2,6 +2,6 @@
 .nyc_output/
 build/
 node_modules/
-
+test/e2e/webpack4/src/
 # Files
 npm-debug.log

package.json

@@ -24,8 +24,9 @@
     "node": ">=6.0.0"
   },
   "scripts": {
+    "init-project": "yarn && cd test\\e2e\\webpack4 && yarn",
     "lint": "eslint --format=codeframe .",
-    "test": "npm run lint && jasmine test/unit/* test/e2e/index.js",
+    "test": "npm run lint && node test/copySrc.js && jasmine test/unit/* test/e2e/*/index.js",
     "coverage": "nyc npm run test",
     "prepublishOnly": "npm run test"
   },
@@ -36,16 +37,17 @@
   "devDependencies": {
     "eslint": "^4.19.1",
     "eslint-plugin-vue-libs": "^2.1.0",
-    "html-webpack-plugin": "^3.2.0",
+    "fs-extra": "^9.1.0",
+    "html-webpack-plugin": "^5.0.0",
     "jasmine": "^3.1.0",
     "jsdom": "^11.9.0",
     "memory-fs": "^0.4.1",
     "nyc": "^11.7.1",
     "rimraf": "^2.6.2",
-    "webpack": "^4.0.0"
+    "webpack": "^5.20.0"
   },
   "peerDependencies": {
-    "html-webpack-plugin": ">=2.26.0",
-    "webpack": ">=4.0.0"
+    "html-webpack-plugin": ">=5.0.0 || ^4.5.1",
+    "webpack": ">=5.20.0 || ^4.1.0"
   }
 }

src/index.js

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 const defaultOptions = require('./lib/default-options')
 const determineAsValue = require('./lib/determine-as-value')
 const doesChunkBelongToHTML = require('./lib/does-chunk-belong-to-html')
@@ -23,6 +23,7 @@ const extractChunks = require('./lib/extract-chunks')
 class PreloadPlugin {
   constructor (options) {
     this.options = Object.assign({}, defaultOptions, options)
+    this.webpackMajorVersion = 4
   }
 
   generateLinks (compilation, htmlPluginData) {
@@ -33,18 +34,23 @@ class PreloadPlugin {
     })
 
     const htmlChunks = options.include === 'allAssets'
-      // Handle all chunks.
+    // Handle all chunks.
       ? extractedChunks
-      // Only handle chunks imported by this HtmlWebpackPlugin.
+    // Only handle chunks imported by this HtmlWebpackPlugin.
       : extractedChunks.filter((chunk) => doesChunkBelongToHTML({
         chunk,
         compilation,
-        htmlAssetsChunks: Object.values(htmlPluginData.assets.chunks)
+        htmlPluginData,
+        pluginOptions: options
       }))
 
     // Flatten the list of files.
     const allFiles = htmlChunks.reduce((accumulated, chunk) => {
-      return accumulated.concat(chunk.files)
+      return accumulated.concat([
+        ...chunk.files,
+        // sourcemap files are inside auxiliaryFiles in webpack5
+        ...chunk.auxiliaryFiles || []
+      ])
     }, [])
     const uniqueFiles = new Set(allFiles)
     const filteredFiles = [...uniqueFiles].filter(file => {
@@ -62,7 +68,13 @@ class PreloadPlugin {
     const sortedFilteredFiles = filteredFiles.sort()
 
     const links = []
-    const publicPath = compilation.outputOptions.publicPath || ''
+    const webpackPublicPath = compilation.outputOptions.publicPath
+
+    // webpack 5 set publicPath default value 'auto'
+    const publicPath = this.webpackMajorVersion >= 5
+      ? webpackPublicPath.trim() !== '' && webpackPublicPath !== 'auto'
+        ? webpackPublicPath : ''
+      : webpackPublicPath || ''
     for (const file of sortedFilteredFiles) {
       const href = `${publicPath}${file}`
 
@@ -99,6 +111,11 @@ class PreloadPlugin {
   }
 
   apply (compiler) {
+    // for webpack5+, we can get webpack version from `compiler.webpack`
+    if (compiler.webpack) {
+      this.webpackMajorVersion = compiler.webpack.version.split('.')[0]
+    }
+
     const skip = data => {
       const htmlFilename = data.plugin.options.filename
       const exclude = this.options.excludeHtmlNames
@@ -112,26 +129,28 @@ class PreloadPlugin {
     compiler.hooks.compilation.tap(
       this.constructor.name,
       compilation => {
-        compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap(
+        HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
           this.constructor.name,
-          (htmlPluginData) => {
+          (htmlPluginData, callback) => {
             if (skip(htmlPluginData)) {
+              callback()
               return
             }
             this.generateLinks(compilation, htmlPluginData)
+            callback()
           }
         )
 
-        compilation.hooks.htmlWebpackPluginAlterAssetTags.tap(
+        HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tap(
           this.constructor.name,
           (htmlPluginData) => {
             if (skip(htmlPluginData)) {
               return
             }
             if (this.resourceHints) {
-              htmlPluginData.head = [
+              htmlPluginData.assetTags.styles = [
                 ...this.resourceHints,
-                ...htmlPluginData.head
+                ...htmlPluginData.assetTags.styles
               ]
             }
             return htmlPluginData

src/lib/does-chunk-belong-to-html.js

@@ -14,17 +14,43 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const EntryPoint = require('webpack/lib/Entrypoint')
 
-module.exports = function doesChunkBelongToHtml ({ chunk, htmlAssetsChunks, compilation }) {
-  // Get all the hashes of the HTML assets.
-  const rootHashes = Object.values(htmlAssetsChunks).map(({ hash }) => hash)
-  // Get a list of chunk groups that contain one of those hashes.
-  const rootChunkGroups = compilation.chunkGroups.filter((chunkGroup) => {
-    return chunkGroup.chunks.filter((chunk) => rootHashes.includes(chunk.renderedHash))
-  })
-  // Get an id for each of those chunk groups.
-  const rootChunkGroupsIds = new Set(rootChunkGroups.map(({ id }) => id))
-  // Return true iff the chunk we're passed belongs to a group whose id is in
-  // the list of root chunk groups.
-  return Array.from(chunk.groupsIterable).some(({ id }) => rootChunkGroupsIds.has(id))
+module.exports = function doesChunkBelongToHtml ({
+  chunk,
+  compilation,
+  htmlPluginData,
+  pluginOptions
+}) {
+  const chunkName = recursiveChunkEntryName(chunk)
+  const options = htmlPluginData.plugin.options
+  return isChunksFiltered(chunkName, options.chunks, options.excludeChunks)
+}
+
+// modify from html-webpack-plugin/index.js `filterChunks`
+function isChunksFiltered (chunkName, includedChunks, excludedChunks) {
+  // Skip if the chunks should be filtered and the given chunk was not added explicity
+  if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) {
+    return false
+  }
+  // Skip if the chunks should be filtered and the given chunk was excluded explicity
+  if (Array.isArray(excludedChunks) && excludedChunks.indexOf(chunkName) !== -1) {
+    return false
+  }
+  // Add otherwise
+  return true
+}
+
+function recursiveChunkEntryName (chunk) {
+  const [chunkGroup] = chunk.groupsIterable
+  return _recursiveChunkGroup(chunkGroup)
+}
+
+function _recursiveChunkGroup (chunkGroup) {
+  if (chunkGroup instanceof EntryPoint) {
+    return chunkGroup.name
+  } else {
+    const [chunkParent] = chunkGroup.getParents()
+    return _recursiveChunkGroup(chunkParent)
+  }
 }

src/lib/extract-chunks.js

@@ -64,7 +64,7 @@ function extractChunks ({ compilation, optionsInclude }) {
     }
   }
 
-  let chunks = compilation.chunks
+  let chunks = [...compilation.chunks]
 
   if (Array.isArray(includeChunks)) {
     chunks = chunks.filter((chunk) => {
@@ -99,7 +99,18 @@ function extractChunks ({ compilation, optionsInclude }) {
   if (includeType === 'allAssets') {
     // Every asset, regardless of which chunk it's in.
     // Wrap it in a single, "psuedo-chunk" return value.
-    return [{ files: Object.keys(compilation.assets) }]
+    // Note: webpack5 will extract license default, we do not need to preload them
+    const licenseAssets = [...compilation.assetsInfo.values()]
+      .map((info) => {
+        if (info.related && info.related.license) {
+          return info.related.license
+        }
+        return false
+      }).filter(Boolean)
+    return [{
+      files: Object.keys(compilation.assets)
+        .filter((t) => !licenseAssets.includes(t))
+    }]
   }
 
   return chunks

test/copySrc.js

@@ -0,0 +1,7 @@
+const fs = require('fs-extra')
+const path = require('path')
+
+const srcPath = path.resolve(__dirname, '../src')
+const distSrcPath = path.resolve(__dirname, 'e2e/webpack4/src')
+
+fs.copySync(srcPath, distSrcPath)

test/e2e/index.js renamed to test/e2e/webpack4/index.js

@@ -14,11 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
-const testSpec = require('../spec')
+const PreloadPlugin = require('./src/index')
+const testSpec = require('../../spec')
 
 const descriptionPrefix = '[webpack 4]'
-testSpec({ webpack, HtmlWebpackPlugin, descriptionPrefix })
+
+testSpec({
+  webpack,
+  HtmlWebpackPlugin,
+  PreloadPlugin,
+  descriptionPrefix
+})

test/e2e/package.json renamed to test/e2e/webpack4/package.json

@@ -6,7 +6,7 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.5.1",
     "webpack": "^4.1.0"
   }
 }