如何在Webpack 5 + Pug中实现页面链接？

核心原因 #

开发服务器运行时，Webpack不会自动把所有Pug文件都编译成可访问的HTML——只有配置为入口或通过html-webpack-plugin关联的Pug文件才会被处理。直接链接.pug后缀的文件，服务器找不到对应的输出资源，自然返回404。

正确配置方案（无需提前编译HTML到src） #

你不需要在src目录手动编译Pug为HTML，调整Webpack配置就能让开发阶段的页面链接正常工作：

1. 用html-webpack-plugin配置多页面
   给每个需要访问的Pug页面添加一个html-webpack-plugin实例，开发服务器和构建阶段都会自动生成对应的HTML文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    // 主页面
    new HtmlWebpackPlugin({
      template: './src/index.pug',
      filename: 'index.html'
    }),
    // 第二个页面
    new HtmlWebpackPlugin({
      template: './src/about.pug',
      filename: 'about.html'
    })
  ]
};

2. 页面内链接指向生成的HTML文件
   在Pug模板里直接链接.html后缀的路径，比如：

a(href="/about.html") 跳转到关于页

开发服务器运行时，这些HTML文件会被Webpack实时编译并托管，不会出现404。

3. 可选：配置开发服务器静态资源目录
   如果有未通过Webpack处理的静态文件，可在devServer里指定静态资源目录，确保服务器能访问到：

module.exports = {
  devServer: {
    static: './public' // 假设静态文件放在public目录
  }
};

为什么不用提前编译到src？ #

手动在src编译Pug到HTML会产生冗余文件，还会破坏Webpack的构建流程——所有模板应由Webpack统一处理，保证开发和构建阶段的一致性，避免出现“开发时正常，构建后出错”的问题。

内容的提问来源于stack exchange，提问作者kris drea