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

Posted 2023-02-16

【中文标题】Vuejs Preload Plugin 因 HtmlWebpackPlugin.getHooks is not a function 而失败

【英文标题】：Vuejs Preload Plugin fails with 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

【参考方案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')],
    )