如何使用Laravel Mix设置React Lazy chunk输出到public/js目录

核心原因 #

Laravel Mix默认仅对主入口文件的输出路径做定向配置，React Lazy底层依赖的动态导入生成的异步chunk，未配置单独输出规则时会默认输出到Mix的根输出目录（即public根目录），不会自动跟随入口文件的输出子目录，因此需要单独覆写webpack的chunk输出规则。

具体配置步骤 #

1. 修改项目根目录下的webpack.mix.js文件，通过mix.webpackConfig()覆写webpack的output配置：

   // 原有Mix入口配置示例
   mix.react('resources/js/app.js', 'public/js')
       .webpackConfig({
           output: {
               // 核心配置：指定异步chunk输出路径，相对路径以Mix的根输出目录（public）为基准
               chunkFilename: 'js/[name].[contenthash].js'
           }
       });
   

   • 配置说明：chunkFilename是webpack专门用来定义动态导入生成的异步chunk输出规则的参数，这里写js/开头会让所有拆分的chunk直接输出到public/js目录下，该规则对所有动态导入生成的chunk生效，不受前端框架类型限制。
   • 配置里的[name]会自动匹配你在React Lazy导入时通过webpackChunkName注释指定的chunk名称，无需额外处理。
2. 清理旧打包产物与缓存
   • 手动删除public根目录下之前生成的零散chunk文件
   • 重新执行打包命令npm run dev / npm run prod / npm run watch即可。

注意事项 #

如果你的项目自定义过webpack的publicPath（例如静态资源部署到站点子目录），需要保证chunkFilename的路径和publicPath规则匹配，否则会出现chunk加载404的问题。比如publicPath配置为/assets/时，chunkFilename需要对应写为assets/js/[name].[contenthash].js。
不要在chunkFilename中写绝对路径（如public/js/xxx），因为该路径本身已经相对于Mix的根输出目录public，多余的路径会导致目录嵌套错误。

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