解决webpack5 webpack devServer可以重新编译但浏览器不能自动刷新的问题

当前依赖版本：

webpack 5.x , webpack-cli 4.x , webpack-dev-server 3.x

由于当前最新webpack-cli 4.x版本跟webpack-dev-server 3.x版本一起使用时会出现报错，可以通过指定webpack-cli的版本（3.x）去进行下载，就可以解决由于两者不兼容所产生的报错了。

（这也只是我当前找到的解决办法，如有更好的解决办法，可以留言偶）

{
    "webpack": "^5.42.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
}

问题：

当使用webpack5时，webpack devServer可以重新编译但浏览器不能自动刷新。

原因：

在 package.json 文件中配置了 browserslist 属性

{
    "browserslist": [
        "> 1%",
        "last 2 versions"
    ]
}

解决方法：

• 方法一（不推荐）

  webpack版本降级。

• 方法二

  删除 package.json 里的 browserslist

  （适用于对浏览器版本无需特殊要求的项目。）

• 方法三

  在 webpack.config.js 中设置 target 属性，使得在开发阶段 browserslist 失效：

// webpack.config.js
module.exports = {
    target: process.env.NODE_ENV === "development" ? "web" : "browserslist",
}

// package.json
{
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js --progress --hot"
      },
}

番外——局部刷新：

通过上述方法可以实现webpack devServer重新编译且浏览器自动刷新。但该刷新为整个页面的刷新，并非局部刷新，用起来不是很舒服。想要实现局部刷新，可以使用 webpack 自带的 HotModuleReplacementPlugin实现效果。

// webpack.config.js
const webpack = require("webpack");
module.exports = {
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
   ],
}

// 入口文件 src/index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("app"));
module?.hot?.accept()

关于 HotModuleReplacementPlugin 的使用和配置可以参考HotModuleReplacementPlugin