I see how old this question is, but I struggled so much to attempt to fix this issue and I finally found a solution using html-webpack-pug-plugin
which extends html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: {
home: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "./public"),
filename: "[name].js",
publicPath: "/public",
clean: true,
},
module: {
rules: [
{
test: /\.(css|sass|scss)$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: "./views/_head.pug",
filename: "../views/head.pug",
minify: false,
inject: "head",
}),
new HtmlWebpackPugPlugin(),
],
};
You should only call HtmlWebpackPugPlugin once as said in the documentation https://github.com/negibouze/html-webpack-pug-plugin#usage
For code to be injected, the template _head.pug needs to have a body tag so that code gets injected For the code to be indented properly, it also needs to have a html tag
_head.pug
doctype html
html
head
body
After building: head.pug
doctype html
html
head
script(defer src="/public/home.js")
link(href="/public/home.css" rel="stylesheet")
body