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

【问题标题】：Generate multiple html pages with webpack and pug使用 webpack 和 pug 生成多个 html 页面
【发布时间】：2021-12-23 19:01:54
【问题描述】：

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

我尝试以不同的方式创建它，文件要么是一个，要么根本没有。

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

};

【问题讨论】：

标签： javascript webpack

【解决方案1】：

要为布局生成静态页面并像在 react 中一样使用导入，您需要在下面添加一个 loader.Link。

Link

【讨论】：