Webpack：热重载不起作用，但更改编译

如何解决Webpack：热重载不起作用，但更改编译

我想知道为什么我的使用 Webpack 热重载配置的 React 项目不起作用？

这是我的webpack.config.js：

const path = require('path');

module.exports = {
  mode: 'development',devServer: {
    port: 3000,hotOnly: true,liveReload: false,contentBase: path.resolve(__dirname,'./src'),historyApiFallback: true,},entry: path.resolve(__dirname,'./src/index.js'),module: {
    rules: [
      { test: /\.js$/,use: 'babel-loader' },{
        test: /\.svg$/,use: [
          {
            loader: 'svg-url-loader',options: {
              limit: 10000,],{
        test: /\.css$/i,use: ['style-loader','css-loader'],output: {
    filename: 'bundle.js',};

我使用 "watch": "webpack serve --progress" 启动我的开发服务器。在 localhost:3000 控制台中，我可以看到 [HMR] Waiting for update signal from WDS... 日志....

这是我的 index.js 文件：

import React from 'react';
import { render } from 'react-dom';

import App from './App';

render(<App />,document.getElementById('app'));

比如我对App.js文件做了一些修改后，可以看到webpack编译成功，但是修改没有出现在localhost:3000

这些是来自控制台的日志：

yarn watch
yarn run v1.22.10
$ webpack serve --progress
10% building 0/1 entries 0/0 dependencies 0/0 modulesi ｢wds｣: Project is running at http://localhost:3000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\dziugas\Desktop\winteka-app\src
i ｢wds｣: 404s will fallback to /index.html
10% building 0/3 entries 21/24 dependencies 3/13 modules[BABEL] Note: The code generator has deoptimised the styling of C:\Users\dziugas\Desktop\winteka-app\node_modules\react-dom\cjs\react-dom.development.js as it exceeds the max of 500KB.
i ｢wdm｣: asset bundle.js 942 KiB [emitted] (name: main)
runtime modules 26.7 KiB 12 modules
cacheable modules 880 KiB
  modules by path ./node_modules/ 875 KiB
    modules by path ./node_modules/webpack/hot/*.js 5.25 KiB 4 modules
    modules by path ./node_modules/scheduler/ 30 KiB 4 modules
    modules by path ./node_modules/react/ 78.7 KiB 2 modules
    modules by path ./node_modules/react-dom/ 736 KiB
      ./node_modules/react-dom/index.js 1.32 KiB [built] [code generated]
      ./node_modules/react-dom/cjs/react-dom.development.js 734 KiB [built] [code generated]
  modules by path ./src/ 5.79 KiB
    modules by path ./src/*.js 872 bytes 2 modules
    modules by path ./src/*.css 2.3 KiB
      ./src/App.css 1.31 KiB [built] [code generated]
      ./node_modules/css-loader/dist/cjs.js!./src/App.css 1010 bytes [built] [code generated]
    ./src/logo.svg 2.64 KiB [built] [code generated]
webpack 5.38.1 compiled successfully in 5380 ms
i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...
i ｢wdm｣: assets by status 942 KiB [cached] 1 asset
cached modules 880 KiB (javascript) 26.7 KiB (runtime) [cached] 32 modules
./src/App.js 699 bytes [built]
webpack 5.38.1 compiled successfully in 116 ms
i ｢wdm｣: Compiled successfully.

解决方法

您在使用 react-hot-loader 吗？

我在我的项目中使用了 webpack@5.38.1 webpack-dev-server@4.0.0-beta.3 和 react-hot-loader@4.12.20 并且它正在工作。

我还将 @hot-loader/react-dom@17.0.1 与 react@17.0.2 一起使用

我的 entry 配置文件中的 webpack.dev.js 对象列出了 react-hot-loader/patch，而 alias 也列出了 @hot-loader/react-dom。

entry: {
   app: ['react-hot-loader/patch','./src/index.js']
},resolve: {
   alias: {
       'react-dom':'@hot-loader/react-dom'
    }
},devServer: {
   liveReload: true
}