使用webpack和pug生成多个html页面

Question

我需要生成几个不同的html页面，但我找不到正常和最新的信息。有两个不同的帕格模板，我需要创建两个单独的页面。

我试图以不同的方式创建它，文件要么是一个，要么是零。

我用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

要生成布局的静态页面并使用in，您需要在下面添加一个loader.Link。

链接