chore(dep): upgrade html-webpack-plugin to v4 (#7119)

packages/webpack/package.json

@@ -25,7 +25,7 @@
     "glob": "^7.1.6",
     "hard-source-webpack-plugin": "^0.13.1",
     "hash-sum": "^2.0.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.0.0",
     "memory-fs": "^0.4.1",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "pify": "^4.0.1",

packages/webpack/src/config/client.js

@@ -129,8 +129,7 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
         filename: '../server/index.spa.html',
         template: appTemplatePath,
         minify: buildOptions.html.minify,
-        inject: true,
-        chunksSortMode: 'dependency'
+        inject: true
       }),
       new VueSSRClientPlugin({
         filename: `../server/${this.name}.manifest.json`

packages/webpack/src/plugins/vue/cors.js

@@ -1,3 +1,5 @@
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+
 export default class CorsPlugin {
   constructor ({ crossorigin }) {
     this.crossorigin = crossorigin
@@ -6,11 +8,11 @@ export default class CorsPlugin {
   apply (compiler) {
     const ID = 'vue-cors-plugin'
     compiler.hooks.compilation.tap(ID, (compilation) => {
-      compilation.hooks.htmlWebpackPluginAlterAssetTags.tap(ID, (data) => {
+      HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tap(ID, (data) => {
         if (!this.crossorigin) {
           return
         }
-        [...data.head, ...data.body].forEach((tag) => {
+        [...data.headTags, ...data.bodyTags].forEach((tag) => {
           if (['script', 'link'].includes(tag.tagName)) {
             if (tag.attributes) {
               tag.attributes.crossorigin = this.crossorigin

packages/webpack/src/plugins/vue/modern.js

@@ -4,6 +4,7 @@
 */
 
 import EventEmitter from 'events'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
 import { safariNoModuleFix } from '@nuxt/utils'
 
 const assetsMap = {}
@@ -42,13 +43,11 @@ export default class ModernModePlugin {
   applyLegacy (compiler) {
     const ID = 'nuxt-legacy-bundle'
     compiler.hooks.compilation.tap(ID, (compilation) => {
-      // For html-webpack-plugin 4.0
-      // HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync(ID, async (data, cb) => {
-      compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(ID, (data, cb) => {
+      HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(ID, (data, cb) => {
         // get stats, write to disk
         this.assets = {
           name: data.plugin.options.filename,
-          content: data.body
+          content: data.bodyTags
         }
 
         cb()
@@ -59,11 +58,9 @@ export default class ModernModePlugin {
   applyModern (compiler) {
     const ID = 'nuxt-modern-bundle'
     compiler.hooks.compilation.tap(ID, (compilation) => {
-      // For html-webpack-plugin 4.0
-      // HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync(ID, async (data, cb) => {
-      compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(ID, async (data, cb) => {
+      HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(ID, async (data, cb) => {
         // use <script type="module"> for modern assets
-        data.body.forEach((tag) => {
+        data.bodyTags.forEach((tag) => {
           if (tag.tagName === 'script' && tag.attributes) {
             tag.attributes.type = 'module'
           }
@@ -71,7 +68,7 @@ export default class ModernModePlugin {
 
         // use <link rel="modulepreload"> instead of <link rel="preload">
         // for modern assets
-        data.head.forEach((tag) => {
+        data.headTags.forEach((tag) => {
           if (tag.tagName === 'link' &&
               tag.attributes.rel === 'preload' &&
               tag.attributes.as === 'script') {
@@ -86,7 +83,7 @@ export default class ModernModePlugin {
 
         for (const a of legacyAssets) {
           a.attributes.nomodule = true
-          data.body.push(a)
+          data.bodyTags.push(a)
         }
 
         if (this.noUnsafeInline) {
@@ -102,7 +99,7 @@ export default class ModernModePlugin {
             source: () => Buffer.from(safariNoModuleFix),
             size: () => Buffer.byteLength(safariNoModuleFix)
           }
-          data.body.push({
+          data.bodyTags.push({
             tagName: 'script',
             closeTag: true,
             attributes: {
@@ -111,7 +108,7 @@ export default class ModernModePlugin {
           })
         } else {
           // inject Safari 10 nomodule fix
-          data.body.push({
+          data.bodyTags.push({
             tagName: 'script',
             closeTag: true,
             innerHTML: safariNoModuleFix

test/dev/modern.spa.test.js

@@ -29,8 +29,8 @@ describe('modern client mode (SPA)', () => {
 
   test('should contain module modern resources', async () => {
     const { body: response } = await rp(url('/'))
-    expect(response).toContain('<script type="module" src="/_nuxt/modern-app.js" crossorigin="use-credentials"')
-    expect(response).toContain('<script type="module" src="/_nuxt/modern-commons.app.js" crossorigin="use-credentials"')
+    expect(response).toContain('<script src="/_nuxt/modern-app.js" type="module" crossorigin="use-credentials"')
+    expect(response).toContain('<script src="/_nuxt/modern-commons.app.js" type="module" crossorigin="use-credentials"')
   })
 
   test('should contain legacy preload resources', async () => {