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

【问题标题】：Webpack: Hot reload doesn't work, but the changes compilesWebpack：热重载不起作用，但更改编译
【发布时间】：2021-08-29 16:53:32
【问题描述】：

我想知道为什么我配置了 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... log....

这是我的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.

【问题讨论】：

我在这里看不到任何配置热重载的东西...

标签： javascript node.js reactjs webpack yarnpkg

【解决方案1】：

你在用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 一起使用

我的webpack.dev.js 配置文件中的entry 对象列出了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
}

【讨论】：