如何为Laravel Mix编译的CSS和JS文件启用哈希以清除缓存？

嗨，我来帮你搞定这个问题！Laravel Mix本身就内置了非常便捷的版本化（哈希）功能，完全能满足你生成带?hash=xxx参数URL的需求，甚至还支持把哈希直接嵌入文件名的模式，下面一步步来操作：

第一步：配置Mix启用哈希功能 #

打开项目根目录下的webpack.mix.js，在你的编译任务链末尾加上.version()方法就行：

// webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .version(); // 这一行就是开启哈希的核心配置

当你运行编译命令（比如npm run dev或npm run prod）后，Mix会自动在public目录生成一个mix-manifest.json文件，里面记录着每个编译后文件对应的哈希映射，示例如下：

{
  "/js/app.js": "/js/app.js?id=7a2f9d3c",
  "/css/app.css": "/css/app.css?id=1b4e8c6d"
}

第二步：在Blade模板中引用带哈希的资源 #

别再用asset()助手函数了，改用Laravel提供的mix()助手——它会自动读取mix-manifest.json里的哈希值，生成你想要的带参数的URL：

<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>

最终生成的HTML代码就和你期望的一致：

<link href="/css/app.css?id=7a2f9d3c" rel="stylesheet">
<script src="/js/app.js?id=1b4e8c6d"></script>

可选：把哈希嵌入文件名（而非URL参数） #

如果你更偏好哈希直接放在文件名里（比如app.7a2f9d3c.css），可以通过修改Webpack的输出配置实现：

// webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig({
       output: {
           filename: 'js/[name].[contenthash].js',
           chunkFilename: 'js/[name].[contenthash].js',
       }
   })
   .version();

这时候mix()助手依然能正确识别资源，生成的URL会是/js/app.7a2f9d3c.js这类格式。

实用小技巧 #

• 仅在生产环境启用哈希：开发环境频繁编译时，哈希会干扰调试，你可以只在生产环境开启版本化：

  if (mix.inProduction()) {
      mix.version();
  }
  

• 清理旧哈希文件：如果用文件名哈希模式，每次编译后旧文件会留在public目录，你可以借助laravel-mix-clean插件自动清理；而URL参数模式下文件名不变，就不会有这个问题。

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