fix: remove use of html-webpack-plugin

fixes deprecation warnings and we don't need it anyway
This commit is contained in:
Pooya Parsa 2021-01-22 12:33:53 +01:00
parent 0b31d93892
commit c89166f8f9
3 changed files with 1 additions and 174 deletions

View File

@ -1,9 +1,7 @@
import path from 'path'
import querystring from 'querystring'
import webpack from 'webpack'
import HTMLPlugin from 'html-webpack-plugin'
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
import CorsPlugin from '../plugins/vue/cors'
import { applyPresets, WebpackConfigContext } from '../utils/config'
import { nuxt } from '../presets/nuxt'
@ -17,8 +15,7 @@ export function client (ctx: WebpackConfigContext) {
clientOptimization,
clientDevtool,
clientPerformance,
clientHMR,
clientHTML
clientHMR
])
}
@ -83,20 +80,6 @@ function clientOptimization (ctx: WebpackConfigContext) {
// TODO: Improve optimization.splitChunks.cacheGroups
}
function clientHTML (ctx: WebpackConfigContext) {
const { options, config } = ctx
// Generate output HTML for SSR
config.plugins.push(
new HTMLPlugin({
filename: '../server/index.ssr.html',
template: options.documentPath,
minify: options.build.html.minify as any,
inject: false // Resources will be injected using bundleRenderer
})
)
}
function clientPlugins (ctx: WebpackConfigContext) {
const { options, config } = ctx

View File

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

View File

@ -1,130 +0,0 @@
/*
* This file is based on @vue/cli-service (MIT) ModernModePlugin
* https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
*/
import EventEmitter from 'events'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import { safariNoModuleFix } from 'src/utils'
const assetsMap = {}
const watcher = new EventEmitter()
export default class ModernModePlugin {
constructor ({ targetDir, isModernBuild, noUnsafeInline }) {
this.targetDir = targetDir
this.isModernBuild = isModernBuild
this.noUnsafeInline = noUnsafeInline
}
apply (compiler) {
if (!this.isModernBuild) {
this.applyLegacy(compiler)
} else {
this.applyModern(compiler)
}
}
get assets () {
return assetsMap
}
set assets ({ name, content }) {
assetsMap[name] = content
watcher.emit(name)
}
getAssets (name) {
return new Promise((resolve) => {
const asset = this.assets[name]
if (asset) {
return resolve(asset)
}
return watcher.once(name, () => {
const asset = this.assets[name]
return asset && resolve(asset)
})
})
}
applyLegacy (compiler) {
const ID = 'nuxt-legacy-bundle'
compiler.hooks.compilation.tap(ID, (compilation) => {
HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tap(ID, (data) => {
// get stats, write to disk
this.assets = {
name: data.plugin.options.filename,
content: data.bodyTags
}
return data
})
})
}
applyModern (compiler) {
const ID = 'nuxt-modern-bundle'
compiler.hooks.compilation.tap(ID, (compilation) => {
HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapPromise(ID, async (data) => {
// use <script type="module"> for modern assets
data.bodyTags.forEach((tag) => {
if (tag.tagName === 'script' && tag.attributes) {
tag.attributes.type = 'module'
}
})
// use <link rel="modulepreload"> instead of <link rel="preload">
// for modern assets
data.headTags.forEach((tag) => {
if (tag.tagName === 'link' &&
tag.attributes.rel === 'preload' &&
tag.attributes.as === 'script') {
tag.attributes.rel = 'modulepreload'
}
})
// inject links for legacy assets as <script nomodule>
const fileName = data.plugin.options.filename
const legacyAssets = (await this.getAssets(fileName))
.filter(a => a.tagName === 'script' && a.attributes)
for (const a of legacyAssets) {
a.attributes.nomodule = true
data.bodyTags.push(a)
}
if (this.noUnsafeInline) {
// inject the fix as an external script
const safariFixFilename = 'safari-nomodule-fix.js'
const safariFixPath = legacyAssets[0].attributes.src
.split('/')
.slice(0, -1)
.concat([safariFixFilename])
.join('/')
compilation.assets[safariFixFilename] = {
source: () => Buffer.from(safariNoModuleFix),
size: () => Buffer.byteLength(safariNoModuleFix)
}
data.bodyTags.push({
tagName: 'script',
closeTag: true,
attributes: {
src: safariFixPath
}
})
} else {
// inject Safari 10 nomodule fix
data.bodyTags.push({
tagName: 'script',
closeTag: true,
innerHTML: safariNoModuleFix
})
}
delete assetsMap[fileName]
return data
})
})
}
}