webpack5使用HtmlWebpackPlugin引入HTML片段，npm run dev报Cannot Get /如何解决？

问题根因 #

1. 你当前的规则给所有.html文件都应用了html-loader，会覆盖HtmlWebpackPlugin默认的lodash模板解析能力，导致主模板里的引入插值无法被正确渲染。生产构建能正常运行是因为构建产物会直接写入磁盘目录，路径匹配逻辑更宽松，而webpack-dev-server从内存读取文件时对路径和模板解析的校验更严格，就会出现404错误。
2. 缺少devServer相关配置，开发服务没有指定正确的静态资源根路径。

解决方案 #

按以下步骤修改webpack配置即可解决：

1. 调整html-loader的匹配规则，仅处理需要引入的HTML片段，排除HtmlWebpackPlugin使用的主模板，让主模板走默认的lodash解析逻辑
2. 补充devServer和output配置，统一开发环境和生产环境的路径规则

修改后的完整配置参考：

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

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    // 统一公共路径，避免开发/生产环境路径不一致
    publicPath: '/'
  },
  devServer: {
    // 指定开发服务的静态资源根目录为构建输出目录
    static: path.join(__dirname, 'dist'),
    hot: true,
    open: true
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        exclude: [
          /node_modules/,
          // 排除主模板，不被html-loader处理
          /src\/templates\/index\.html$/
        ],
        use: ['html-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/templates/index.html',
    })
  ]
}

如果修改后还是有引入报错，可以把主模板里的引入代码调整为：

<%= require('./partials/header.html') %>

内容的提问来源于stack exchange，提问作者Robert Wildling