使用 webpack 5 热重载不适用于我的反应项目 [英] Hot reloading not working on my react project with webpack 5

问题描述

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

I'am creating a new project. As I completed installing npm packages and ran the basic setup, all worked fine, except, when I made changes in my code and saved the file and moved to browser to see the changes, the page was not reloaded in the browser. I have to refresh page manually to see the new changes.

这是我的 package.json 文件:

Here is my package.json file :

{
  "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:

Here is my 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, './dist'),
    //     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 上，但我不确定.请帮忙.

I searched the web and it seems like the problem is with webpack-dev-server, but I'am not sure. Plz help.

推荐答案

Update webpack-dev-server version to 4.0.0-beta.0 我也有同样的情况也有问题.

Update webpack-dev-server version to 4.0.0-beta.0 I had the same issue too.

这篇关于使用 webpack 5 热重载不适用于我的反应项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！