问题描述
我想知道为什么我的使用 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
}