如何阻止 Webpack 文件名更改？

Posted 2023-02-22

【中文标题】如何阻止 Webpack 文件名更改？

【英文标题】：How can I stop Webpack filenames from changing?

【发布时间】：2016-10-15 16:53:01

【问题描述】：

我是 webpack 的新手。

我已经使用vue-cli 设置了样板模板。目前，当我运行npm run build 时，我的文件将编译到/dist/build 文件夹，然后拆分为js 和css 文件夹。

我正在制作一个 WordPress 主题，我正在访问来自 <script> 和 <style> 标记的文件。它可以工作......但是每次我通过npm run build重新编译Webpack时，文件名都会随机化，在末尾添加一串随机字符（使得无法直接从index.php引用文件）。

有没有办法阻止 Webpack 随机化文件名？我不想每次编译时都更新我的 index.php。还是我走错了路？

【参考方案1】：

这是一个功能 - 想法是您可以允许浏览器尽可能长时间地缓存您的 js/css，但每次更改文件时都要更改实际文件名，这样浏览器就不会识别它并且不会t 使用缓存版本。但它确实需要您有办法在每次构建时使用更新的文件名更新您的 html 源代码（当然，有一些包可以自动执行此操作）。

但是，如果您不想这样做，则不必这样做。 webpack 的配置允许你指定用于构建的文件名。 output.filename 是您使用的配置字段。请参阅the docs on output here 了解更多信息。

【讨论】：

感谢您的回复，非常有帮助。我喜欢缓存的想法。你提到了自动化这个过程的包——你能推荐一些吗？样板文件安装了 HTML-Webpack-Plugin，它可以按照这些方式进行操作。但是，当我尝试实现它时，我得到了相对路径（即 /dist/static ...）。显然，我需要在相对路径之前插入一个带有 PHP 生成 URL 的绝对路径。有没有你知道的方法来实现这个？

从 webpack 配置中的文件名中删除哈希值是可行的。谢谢。

@Blue_Dragon360 您的资产将始终与您的 publicPath 配置相关。尽管有名字，publicPath 可以是一个完整的 url，例如“www.mysite.com/”或“www.mysite.com/js/”。这应该会给你你需要的网址。