Webpack升级后module.rule.generator.publicPath配置失效报错如何解决？

问题根因 #

你遇到的Invalid URL报错核心原因是publicPath的配置格式不符合Webpack5的规则：

• Webpack5的Asset Module要求publicPath如果是相对路径，必须以/结尾，否则资源路径拼接时会生成非法URL结构，触发报错。你当前配置的publicPath: "fonts"缺少尾斜杠，是直接触发报错的原因。
• 另外publicPath需要和你的filename配置、CSS文件输出路径对齐，否则mini-css-extract-plugin处理CSS内的资源引用时也会出现路径错误。

正确配置方案 #

配置要点 #

1. 所有publicPath配置末尾必须加斜杠
2. 路径层级需要匹配你的实际输出结构：
   • 若开发环境下CSS输出到css/目录、字体输出到项目根目录的fonts/目录，开发环境的publicPath需要配置为../fonts/来匹配相对路径
   • 生产环境可根据站点部署根路径配置为绝对路径/fonts/或者相对路径./fonts/
3. 确认你的generator配置写在匹配字体资源的module.rule下，仅对字体资源生效

配置示例 #

module.exports = {
  module: {
    rules: [
      {
        // 匹配字体文件格式，可根据你的实际情况调整
        test: /\.(woff2?|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: devMode
            ? "../fonts/[name][ext][query]"
            : "fonts/[name][hash][ext][query]",
          // 按实际路径调整，必须带尾斜杠
          publicPath: devMode ? "../fonts/" : "/fonts/",
        },
      }
    ]
  }
}

降级后仍报错的处理方案 #

• 清空本地node_modules目录和包管理工具的lock文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新安装依赖，避免版本缓存导致的兼容性问题
• 升级mini-css-extract-plugin到2.0及以上版本，适配Webpack5的资源处理逻辑

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