I need to generate several different html pages, but I cannot find normal and up-to-date information. There are 2 different pug templates and I need to create two separate pages.
I tried to create it in different ways, the file is either one or none at all.
I use webpack 5.
module.exports = {
context: path.resolve(__dirname, "src"),
mode: "development",
entry: "./js/index.js",
//точка выхода
output: {
filename: `./js/[name].[hash].js`,
path: path.resolve(__dirname, "dist"),
clean: true,
publicPath: "",
},
optimization: {
splitChunks: { chunks: "all" },
},
plugins: [
require("autoprefixer"),
new HtmlWebPackPlugin({
template: path.resolve(__dirname, "src/index.pug"),
filename: path.resolve(__dirname, "build/index.html"),
inject: false,
chunks: ["index"],
}),
new HtmlWebPackPlugin({
template: path.resolve(__dirname, "src/step1.pug"),
filename: path.resolve(__dirname, "build/step1.html"),
inject: false,
chunks: ["step1"],
minify: {
//удаляю коменты
removeComments: true,
//убираю пробелы
collapseWhitespace: isProd,
},
}),
new HtmlWebpackPugPlugin(),
],
module: {
rules: [
//для обновления html при изменениях
{ test: /\.html$/, loader: "html-loader" },
{
test: /\.pug$/,
loader: "pug-loader",
type:"asset/source",
generator: {
filename: "./[name][ext]",
},
exclude: /(node_modules|bower_components)/,
},
],
},
};