browserslist 导致 webpack-dev-server 的自动刷新失效

Question

只要在根目录有 .browserslistrc 文件（即使这个文件是空的），或者在 package.json 里面配置了 browserslist 字段，webpack-dev-server 在 vscode 里面编译成功，但是在浏览器没法看到更新，一般如果正常启动的话会在浏览器的 console 里面看到下面三行

[HMR] Waiting for update signal from WDS... index.js:48 
[WDS] Hot Module Replacement enabled.
[WDS] Live Reloading enabled.

如果配置了 browerslist 则只有第一行，并且也无法自动更新，必须手动刷新浏览器才能看到更新。

把 .browserslistrc 和 package.json 里面的 browserslist 都删了就一切正常。我的 webpack 版本如下

"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",

希望有大神指导一下。

Answer 1

已经在 webpack-dev-server 的 issue 中找到答案了，目前这个 bug 还没修复，暂时只能通过设置 target 字段来解决。

target: process.env.NODE_ENV === 'development' ? 'web' : 'browserslist'

webpack-dev-server-issue

Answer 2

在webpack.config.js中添加属性：

module.exports = {
    ...,
    target: "web",
}

Answer 3

被坑了一天了，都2021年了，没想到webpack5还有坑

Answer 4

4.x已解决这个问题

Answer 5

在评论区找到了答案，感动得快哭了。逼死强迫症了