diff --git a/packages/webpack/package.json b/packages/webpack/package.json index 4816d04da9..03870ba0f0 100644 --- a/packages/webpack/package.json +++ b/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", diff --git a/packages/webpack/src/config/client.js b/packages/webpack/src/config/client.js index 7f4d1dfa79..559ed7c1b6 100644 --- a/packages/webpack/src/config/client.js +++ b/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` diff --git a/packages/webpack/src/plugins/vue/cors.js b/packages/webpack/src/plugins/vue/cors.js index 3f0a1948d3..d72d797794 100644 --- a/packages/webpack/src/plugins/vue/cors.js +++ b/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 diff --git a/packages/webpack/src/plugins/vue/modern.js b/packages/webpack/src/plugins/vue/modern.js index 35b6cb56a7..c42085c2f7 100644 --- a/packages/webpack/src/plugins/vue/modern.js +++ b/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