Vuejs Preload Plugin 因 HtmlWebpackPlugin.getHooks is not a function 而失败答案

【问题标题】：Vuejs Preload Plugin fails with HtmlWebpackPlugin.getHooks is not a functionVuejs Preload Plugin 因 HtmlWebpackPlugin.getHooks is not a function 而失败
【发布时间】：2021-08-23 14:31:09
【问题描述】：

我的 package.json 的 sn-p

"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 不是函数

TypeError: HtmlWebpackPlugin.getHooks 不是函数

操作系统：MacOS BigSur

【问题讨论】：

标签： javascript vue.js webpack vuejs2 webpack-4

【解决方案1】：

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

所以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')],
    })
}

【讨论】：