阅读 769

解决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

文章分类
前端
文章标签