I have a Webpack config where HtmlWebpackPlugin loads pug files via @webdiscus/pug-loader and then it must prettify HTML code with HtmlPrettifyPlugin but this is not happening. During the experiments I get that HtmlWebpackPlugin.beforeEmit hook does not fire and then that no hook of HtmlWebpackPlugin does. Why is that can be?
A part of webpack.config.babel.js
(Some variables which not defined here are just parameters of type string)
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(),
//...
}
//...
}
A part of HtmlPrettifyPlugin (index.js)
class HtmlPrettifyPlugin {
//...
apply(compiler) {
compiler.hooks.compilation.tap('HtmlPrettifyPlugin', (compilation) => {
//this function is surely called while `npm run build`
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('HtmlPrettifyPlugin',
(data, callback) => {
// this code shows no activirty while `npm run build`
data.html = beautify(data.html, this.options)
callback(null, data)
});
});
}
//...
}
module.exports = HtmlPrettifyPlugin