React应用Webpack打包时动态懒加载chunk路径错误加载失败

懒加载chunk加载报错Error: loading chunk 0 failed的核心原因是Webpack output配置缺失publicPath字段：

• output.path仅用于指定打包产物在本地磁盘的存储目录，不会影响浏览器端发起资源请求的路径
• 懒加载chunk的请求路径由Webpack运行时自动拼接，拼接规则完全依赖output.publicPath定义的资源访问前缀；未手动配置时该值默认为根路径/，因此会出现主bundle因HTML中手动写死路径可正常加载、懒加载chunk自动请求到根路径的异常。

在Webpack的output配置中补充publicPath字段，值与主bundle实际的访问路径前缀对齐即可：

{
  // ...其余配置
  output: {
    filename: '[name].client.bundle.js',
    chunkFilename: 'chunk.js',
    // 本地磁盘输出目录，原有配置保留
    path: path.resolve(__dirname, '..', '.build', 'js'),
    // 新增资源访问公共前缀，和主bundle访问路径匹配
    publicPath: '/build/js/'
  },
  // ...其余配置
}

配置注意事项 #

• publicPath末尾必须携带斜杠，否则会出现路径拼接错误，生成/build/jschunk.js这类非法路径
• 若使用webpack-dev-server做本地开发，需同步确认devServer的静态资源映射规则，保证/build/js/路径可正确映射到本地.build/js目录下的文件
• 建议将chunkFilename修改为带hash的命名规则，例如chunk.[contenthash:8].js，既可以避免多chunk重名覆盖问题，也能优化浏览器缓存策略
• 配置修改后需重启本地开发服务/重新执行构建，清除浏览器缓存后验证即可。

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