Laravel 5.8中带哈希的app.js与vendor.js懒加载引入方案

方案一：用Laravel Mix自带的mix()助手函数（推荐） #

Laravel Mix 构建完成后会自动生成public/mix-manifest.json文件，里面记录了原文件名与打包后带哈希文件名的映射关系。直接用mix()助手就能自动解析出正确的带哈希路径，无需手动处理文件名。

操作步骤： #

1. 调整webpack.mix.js配置：
   若要给app.js和vendor.js也加上哈希，可在配置中明确设置输出文件名规则，或直接添加.version()方法（该方法会自动生成映射文件）：

   mix.react('resources/js/app.js', 'public/js')
       .copy('node_modules/lodash/lodash.min.js', 'public/js')
       .extract(['vue', 'jquery'])
       .webpackConfig({
           output: {
               filename: '[name].[contenthash:8].js', // 给app.js、vendor.js添加哈希
               chunkFilename: '[name].[contenthash:8].js' // 懒加载chunk的哈希规则
           },
       })
       .version();
   

2. 修改Blade模板的引入方式：
   把原来的asset()替换为mix()，助手会自动读取映射文件输出正确路径：

   ...more blade html
   <script src="{{ mix('js/vendor.js') }}"></script>
   <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>
   

方案二：仅给懒加载chunk加哈希，保留app.js和vendor.js原名 #

如果不想让app.js和vendor.js带哈希，只需修改webpack的输出配置，只对懒加载chunk设置哈希规则：

mix.react('resources/js/app.js', 'public/js')
    .copy('node_modules/lodash/lodash.min.js', 'public/js')
    .extract(['vue', 'jquery'])
    .webpackConfig({
        output: {
            filename: '[name].js', // app.js、vendor.js保持原文件名
            chunkFilename: '[name].[contenthash:8].js' // 仅懒加载chunk带哈希
        },
    });

这种情况下，你可以继续使用原来的asset()引入方式，配合版本号参数：

<script src="{{asset('js/vendor.js')}}?v={{getAssetsVersion()}}"></script>
<script src="{{asset('js/app.js')}}?v={{getAssetsVersion()}}"></script>

懒加载的chunk路径会由webpack自动处理，无需手动引入。

注意事项 #

• 开发环境下，修改代码后Mix会自动更新mix-manifest.json，确保路径实时正确。
• 生产环境构建时，需运行npm run prod生成最终的带哈希文件和映射文件。

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