Generate multiple html pages with webpack and pug

Question

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)/,
      },
    
    ],
  },

};

Answer 1

To generate static pages for layout and use imports like in react, you need to add a loader.Link below.

Link