webpack-dev-server的缓存问题

Question

我在运行webpack开发服务器时遇到了一些问题。每当我保存文件并编译更改时，它们都不会反映在浏览器中。(命令行中没有错误)

我正在运行以下命令：

webpack-dev-server --progress --color

但是，如果每次发生更改时都运行webpack，这将反映在浏览器中。

我在我的Mac上运行Chrome (OSX的最新版本)，我启用了“devtools打开时禁用缓存”选项。不用说，但是-你永远也不知道，我的DevTools打开了.:)

我是不是错过了一个简单的步骤？

Answer 1

为了禁用缓存，我在webpack配置中使用了高速缓存控制头。

devServer: {
  headers: {
    'Cache-Control': 'no-store',
  },
},

Answer 2

我也遇到了同样的问题，我在html中使用的是dist/app.js文件，而不是webpack开发服务器生成的app.js文件。

在我的html中使用它解决了这个问题：

<script src="vendor.js"></script>
<script src="app.js"></script>

Answer 3

我必须用完整的URL将脚本标记直接指向webpack-dev服务器，如下所示：

<script src="http://localhost:8080/vendor.bundle.min.js"></script>
<script src="http://localhost:8080/app.bundle.min.js"></script>