使用 webpack 5 热重载不适用于我的反应项目

如何解决使用 webpack 5 热重载不适用于我的反应项目

我正在创建一个新项目。当我完成安装 npm 包并运行基本设置时，一切正常，除了当我更改代码并保存文件并移至浏览器查看更改时，页面未在浏览器中重新加载。我必须手动刷新页面才能看到新的更改。

这是我的 package.json 文件：

{
  "name": "resume","version": "1.0.0","description": "","main": "index.js","scripts": {
    "start": "webpack serve"
  },"keywords": [],"author": "","license": "ISC","dependencies": {
    "@babel/preset-react": "^7.12.10","react": "^17.0.1","react-dom": "^17.0.1"
  },"devDependencies": {
    "@babel/core": "^7.12.10","@babel/plugin-proposal-class-properties": "^7.12.1","@babel/preset-env": "^7.12.11","babel-loader": "^8.2.2","clean-webpack-plugin": "^3.0.0","html-webpack-plugin": "^4.5.1","webpack": "^5.12.2","webpack-cli": "^4.3.1","webpack-dev-server": "^3.11.1"
  }
}

这是我的 webpack.config.js：

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { web } = require('webpack')

module.exports = {
    mode: 'development',devServer: {
        historyApiFallback: true,contentBase: path.resolve(__dirname,'./dist'),open: true,compress: true,hot: true,port: 8080,},target: 'web',// entry: {
    //     main: path.resolve(__dirname,'./src/index.js'),// },// output: {
    //     path: path.resolve(__dirname,//     filename: '[name].bundle.js',module: {
        rules: [
            // JavaScript
            {
                test: /\.js$/,exclude: /node_modules/,use: ['babel-loader'],],plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack Boilerplate',template: path.resolve('./index.html'),filename: 'index.html',// output file
        }),new CleanWebpackPlugin(),new webpack.HotModuleReplacementPlugin(),}

我在网上搜索，问题似乎出在 webpack-dev-server 上，但我不确定。请帮忙。

解决方法

将 webpack-dev-server 版本更新为 4.0.0-beta.0 我也遇到了同样的问题。