Laravel Mix/Webpack 目录前缀

Question

我当前的 webpack 配置是：

mix.webpackConfig({
output: {
chunkFilename: "[name].js?ver=[chunkhash:8]",
filename: "[name].js",
}
});
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/web.scss', 'public/css/web.css')
.options({
processCssUrls: false,
uglify: {
uglifyOptions: {
warnings: false,
comments: false,
beautify: false,
sourceMap: true,
compress: {
warnings: false,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
drop_debugger: true
},
output: {
comments: false
},
}
}
}).version().sourceMaps();
mix.extract(['vue', 'jquery','vue-awesome-swiper', 'bootstrap', 'lodash', 'vue-pluralize', 'vue-read-more', 'vue-sticky-directive', 'vue-waypoint']);

当我运行 npm watch 或 npm 生产时，它会在公共目录中创建数十个 javascript 文件，例如 11.js 或 19.js。 即使使用 ？ver= 参数，我们仍然会遇到一些浏览器缓存 javascript 并且在进行更改时不更新的问题。

我们过去在供应商和清单文件中遇到过这个问题，所以我们在 Laraval 中解决这个问题的一种方法是：

<script src="/cache-bust-{{ Cache::remember('cache-bust_' . md5(mix('/js/manifest.js')), 60, function () { return md5(mix('/js/manifest.js')); }) }}{{ mix('/js/manifest.js') }}"></script>
<script src="/cache-bust-{{ Cache::remember('cache-bust_' . md5(mix('/js/vendor.js')), 60, function () { return md5(mix('/js/vendor.js')); }) }}{{ mix('/js/vendor.js') }}"></script>
<script src="/cache-bust-{{ Cache::remember('cache-bust_' . md5(mix('/js/app.js')), 60, function () { return md5(mix('/js/app.js')); }) }}{{ mix('/js/app.js') }}"></script>

然后在 apache conf 中添加此重写：

RewriteRule ^cache-bust-(.*)/js/(.*)$ /js/$2 [L]

因此，可能会收到一个请求，以查找：

<script src="/cache-bust-e8504524e2eb05e2daa34d6cbb91dd4c/js/manifest.js?id=be4f23f7f36b3345edf2"></script>

Apache正确路由它，并在缓存破坏方面做得更好100%。

我们想对这些小js文件(如11.js(做同样的事情。 请记住，我不想实际更改 chunkFile 或文件名，因为当您这样做并将名称基于 chunkhash 时，例如，每次重新编译时，都会保留具有旧 chunkhash 名称的旧 js 文件。

我想做的是在调用 11.js 的位置前面放置一个目录前缀。 我似乎找不到什么告诉 mix 将这些文件直接放入公共目录？ 理想情况下，我想要某种配置，如下所示：

urlPath: "cache-js-bust-[chunkhash:8]/[chunkFilename]"

然后重写：

RewriteRule ^cache-js-bust-(.*)/(.*)$ /$2 [L]

有什么想法吗？

Answer 1

所以经过一些反复试验，我找到了答案：

mix.webpackConfig({
output: {
publicPath: "/cache-js-bust-[hash]/",
chunkFilename: "[name].js?ver=[chunkhash:8]",
filename: "[name].js",
}

}(;