HtmlWebpackPlugin钩子未触发致HtmlPrettifyPlugin失效问题排查

我在Webpack配置中，通过@webdiscus/pug-loader加载pug文件，配合HtmlWebpackPlugin生成HTML页面，期望用HtmlPrettifyPlugin美化输出的HTML代码，但该功能完全不生效。测试发现HtmlWebpackPlugin的beforeEmit乃至所有钩子都没有触发，请问这可能是什么原因？

相关代码片段 #

webpack.config.babel.js 部分代码 #

export default {
 //...
 module: {
  rules: [
   //...
   {
    test: /\.html$/i,
    loader: "html-loader",
    options: {
     sources: true,
     esModule: true,
     minimize: false,
    },
   },
   {
    test: /\.pug$/,
    use: [
     {
      loader: "@webdiscus/pug-loader",
      options: {
       compileDebug: true,
       esModule: true,
       basedir: paths.src.base,
       data: {
        isDev: false,
        prefix: config.html.publicPath,
        publicPath: config.html.publicPath,
       },
      },
     },
    ],
   }
  ],
  plugins: [
   //...
   () => glob
    .sync('{src/pages/*.pug,src/pages/**/index.pug}', {cwd})
    .map((file) => {
        const name = file.split('pages')[1];
        const dirName = path.dirname(name).substring(1);
        const dir = dirName ? `${dirName}/` : dirName;

        return new HtmlWebpackPlugin({
            template: `${paths.src.pages}${name}`,
            filename: `${dir}${path.basename(name, '.pug')}.html`,
            inject: true,
            minify: false,
        })
    })
  ],
  new HtmlPrettifyPlugin(),
  //...
 }
 //...
}

HtmlPrettifyPlugin（index.js）部分代码 #

class HtmlPrettifyPlugin {
 //...
 apply(compiler) {
  compiler.hooks.compilation.tap('HtmlPrettifyPlugin', (compilation) => {
   // npm run build时该函数确实会被调用
   HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('HtmlPrettifyPlugin',
    (data, callback) => {
      // npm run build时此代码无任何反应
      data.html = beautify(data.html, this.options)
      callback(null, data)
    });
  });
 }
 //...
}
module.exports = HtmlPrettifyPlugin

核心原因分析及修复方案 #

1. Webpack配置结构错误：plugins被嵌套在module内部 #

Webpack配置中，plugins是与module同级的根级属性，你当前将plugins写在module对象内部，Webpack无法识别并加载这些插件。这直接导致HtmlWebpackPlugin实例未被正确注册，其钩子自然不会触发。

2. HtmlWebpackPlugin实例未正确生成 #

你在plugins数组中放入了一个箭头函数，但未执行该函数来返回实例数组。Webpack的plugins数组需要直接接收插件实例（或可执行后返回实例的函数），当前写法下函数未执行，HtmlWebpackPlugin实例根本没有被创建。

修复步骤 #

第一步：修正配置结构并正确生成HtmlWebpackPlugin实例

将plugins移至根级别，同时执行箭头函数并展开返回的实例数组：

export default {
 //...
 module: {
  rules: [
   // 保留原loader规则...
  ]
 }, // 闭合module对象
 plugins: [
   //...
   // 执行箭头函数并展开返回的HtmlWebpackPlugin实例数组
   ...(() => glob
    .sync('{src/pages/*.pug,src/pages/**/index.pug}', {cwd})
    .map((file) => {
        const name = file.split('pages')[1];
        const dirName = path.dirname(name).substring(1);
        const dir = dirName ? `${dirName}/` : dirName;

        return new HtmlWebpackPlugin({
            template: `${paths.src.pages}${name}`,
            filename: `${dir}${path.basename(name, '.pug')}.html`,
            inject: true,
            minify: false,
        })
    })
   )(), // 执行函数
   new HtmlPrettifyPlugin(),
   //...
 ],
 //...
}

第二步：额外检查点

• 确认HtmlWebpackPlugin与HtmlPrettifyPlugin的版本兼容性：不同版本的HtmlWebpackPlugin钩子API可能存在差异，确保两者版本匹配。
• 验证@webdiscus/pug-loader的输出：确保loader正确将pug文件编译为HTML字符串，传递给HtmlWebpackPlugin处理。

内容的提问来源于stack exchange，提问作者Mik