Замена пути к pug шаблону в атрибуте href на итоговый html

Question

Есть два pug шаблона, в разметки одного есть тег <a> в href указан путь к другому pug шаблону, как настроить webpack так, чтобы при сборке, путь указывающий на pug шаблон заменялся на путь к его скомпилированному html файлу в папке dist?

Мой webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",

  entry: {
    main: "./src/index.js"
  },

  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist")
  },

  module: {
    rules: [
      {
        test: /\.pug$/i,
        use: [
          {
            loader: "pug-loader"
          }
        ]
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: "main.[contenthash].html",
      template: "src/main.pug"
    }),
    new HtmlWebpackPlugin({
      filename: "other.[contenthash].html",
      template: "src/other.pug"
    }),
    new CleanWebpackPlugin()
  ]
};

main.pug

doctype html
html(lang="en")
  head
    title Main page
  body
    div
      h1 Main page
      a(href="./other.pug") Go to other

main.[hash].html на выходе

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Main page</title>
    <script defer src="main.fdb2493bc4045c544048.js"></script>
  </head>

  <body>
    <div>
      <h1>Main page</h1><a href="./other.pug">Go to other</a>
    </div>
  </body>
</html>

Как вместо <a href="./other.pug">Go to other</a>, получить <a href="./other.[hash].html">Go to other</a>?

БЛОГ НА HUSL

Замена пути к pug шаблону в атрибуте href на итоговый html

Ответы (0 шт):