如何阻止Webpack更改文件名？

Question

我对webpack非常陌生。

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

我正在制作WordPress主题，并从<script>和<style>标记中访问文件。这很有效...但是每次我通过npm run build重新编译Webpack时，文件名都会随机化，添加一串随机字符（这使得无法直接从index.php引用文件）。

有没有办法阻止Webpack随机化文件名？我不想每次编译时都更新我的index.php。或者我做错了什么？

- Aaa

Answer 1

这是一个特性 -- 想法是允许浏览器尽可能地缓存你的js/css，但每次更改文件时更改实际文件名，以便浏览器不会识别它并不使用缓存版本。但是，这需要您有一种方法在每次构建时更新HTML源代码中的更新文件名（当然有自动化包来实现这一点）。

但如果您不想这样做，也可以不这样做。webpack的配置允许您指定用于构建的文件名。output.filename是您要使用的配置字段。有关更多信息，请参见此处的输出文档。

- Brendan Gannon

---

谢谢回复，非常有帮助。我喜欢缓存的想法。您提到了自动化此过程的软件包 - 您能推荐一些吗？模板中安装了HTML-Webpack-Plugin，它可以完成类似的工作。但是，当我尝试实现它时，我得到了相对路径（即/ dist / static ...）。显然，我需要在相对路径之前插入一个由PHP生成的绝对路径URL。您知道如何实现这个方法吗？ - Aaa

从webpack配置文件名中删除哈希值已经生效。谢谢。 - Aaa

@Blue_Dragon360，你的资源将始终相对于publicPath配置。尽管名称如此，但publicPath可以是完整的URL，例如'www.mysite.com/'或'www.mysite.com/js/'。这应该会给你所需的URL。 - Brendan Gannon