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

Question

我需要生成几个不同的 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)/, }, ], }, };

Answer 1

尝试使用pug-plugin 。 该插件可以从 webpack 条目中定义的哈巴狗模板生成 static HTML。

webpack.config.js

const path = require('path');
const PugPlugin = require('pug-plugin');

module.exports = {
  output: {
    filename: './js/[name].[hash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
    clean: true,
  },

  entry: {
    index: './js/index.js',

    indexHtml: {
      import: './src/index.pug',
      filename: '../build/index.html', // => __dirname/build/index.html
    },

    step1: {
      import: './src/index.pug',
      filename: '../build/[name].html', // => __dirname/build/step1.html
    }
    
    // example for output to default `output.path`
    about: './src/about.pug', // => __dirname/dist/about.html
  },

  plugins: [
    new PugPlugin(), // add the pug-plugin
  ],

  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: PugPlugin.loader, // add the pug-loader
        exclude: /(node_modules|bower_components)/,
      },
    ],
  },
};

查看更多使用示例