Current dependent version:

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

The latest webpack-cli 4.x version and webpack-dev-server 3.x version can be used together, you can specify webpack-cli (3.x) to download, you can resolve the error caused by the incompatible.

(This is just the solution I have found so far. If you have a better solution, please leave a message.)

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

Question:

When using Webpack 5, WebPack devServer can be recompiled but the browser cannot refresh automatically.

The reason:

The browserslist property is configured in the package.json file

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

Solutions:

  • Method 1 (not recommended)

    The Webpack version is degraded.

  • Method 2

    Delete browserslist from package.json

    (For projects that require no special browser version.)

  • Methods three

    Set the target property in webpack.config.js to disable browserslist during development:

// 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"
      },
}
Copy the code

External — Local refresh:

Webpack devServer can be recompiled and automatically refreshed by the browser. But the refresh is for the whole page, not partial refresh, not very comfortable to use. Want to realize local refresh, you can use the webpack own HotModuleReplacementPlugin implementation effect.

// webpack.config.js const webpack = require("webpack"); module.exports = { plugins: [new webpack HotModuleReplacementPlugin ()],} / / SRC/index entry file. The TSX import the React from "React"; import ReactDOM from "react-dom"; import App from "./App"; ReactDOM.render(<App />, document.getElementById("app")); module? .hot? .accept()Copy the code

The use of about HotModuleReplacementPlugin HotModuleReplacementPlugin and configuration can be reference