javascript - Vuejs 预加载插件失败，HtmlWebpackPlugin.getHooks 不是函数

Question

我的 package.json 的一个片段

"vue": "^2.6.11",
"@vue/preload-webpack-plugin": "^2.0.0",

vue.config.js 文件，

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
const VuePreloadPlugin = require('@vue/preload-webpack-plugin')

const myCompressionPlug = new CompressionPlugin({
  algorithm: 'gzip',
  test: /\.js$|\.css$|\.png$|\.svg$|\.jpg$|\.woff2$/i,
  deleteOriginalAssets: false,
})

const myPreloadPlug = new VuePreloadPlugin({
  rel: 'preload',
  fileBlacklist: [/\.js/]
})

module.exports = {
  productionSourceMap: process.env.NODE_ENV !== 'production',
  chainWebpack: (config) => {
    config.plugins.delete('prefetch')
    config.plugin('CompressionPlugin').use(myCompressionPlug)
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach((type) => addStyleResource(config.module.rule('stylus').oneOf(type)))
    config.plugin('PreloadPlugin').use(myPreloadPlug)
  },
}

function addStyleResource(rule) {
  rule
    .use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [path.resolve(__dirname, './src/styles/sass/*.scss')],
    })
}

错误，

ERROR TypeError: HtmlWebpackPlugin.getHooks is not a function

TypeError: HtmlWebpackPlugin.getHooks is not a function

操作系统:MacOS BigSur

Answer 1

我能够通过将它放在 configureWebpack 对象而不是 chainWebpack 对象中来添加预加载 Webpack 插件。

所以 configureWebpack 对象看起来像这样:

configureWebpack: {
    plugins: [myPreloadPlug]
},

您的 vue.config.js 文件将如下所示:

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
const VuePreloadPlugin = require('@vue/preload-webpack-plugin')

const myCompressionPlug = new CompressionPlugin({
  algorithm: 'gzip',
  test: /\.js$|\.css$|\.png$|\.svg$|\.jpg$|\.woff2$/i,
  deleteOriginalAssets: false,
})

const myPreloadPlug = new VuePreloadPlugin({
  rel: 'preload',
  fileBlacklist: [/\.js/]
})

module.exports = {
  productionSourceMap: process.env.NODE_ENV !== 'production',
  chainWebpack: (config) => {
    config.plugins.delete('prefetch')
    config.plugin('CompressionPlugin').use(myCompressionPlug)
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach((type) => addStyleResource(config.module.rule('stylus').oneOf(type)))
  },
  configureWebpack: {
    plugins: [myPreloadPlug]
  },
}

function addStyleResource(rule) {
  rule
    .use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [path.resolve(__dirname, './src/styles/sass/*.scss')],
    })
}