问题描述
Hot Module Replacement '[HMR] Waiting for update signal from WDS...'永远，如何启用Hot Module Replacement或从Webpack Dev Server发送信号?
我希望启用热模块替换.因此，我在 webpack.config.js 中设置了 hot: true.
我坚持了
[HMR] 正在等待来自 WDS 的更新信号...
我希望看到
[HMR] 正在等待来自 WDS 的更新信号...
[WDS] 热模块更换已启用.
我尝试了 webpack serve --hot --inline 命令，但我一无所获...
webpack.config.js
//路径const path = require('path');const srcPath = path.join(__dirname, 'src');const distPath = path.join(__dirname, 'dist');const publicPath = path.join(__dirname, 'public');//插件...//模块模块.出口 = {模式:'发展'，条目:path.join(srcPath, 'index.tsx'),输出: {路径:distPath，文件名:'bundle.js',},模块: {规则: [//打字稿{测试:/\.(j|t)sx?$/,排除:/node_modules/，使用:['babel-loader']},},//解决...开发服务器:{contentBase:distPath，historyApiFallback: 真,热:真的，内联:真实，写入磁盘:真},//插件....babelrc
//.babelrc{预设":[@babel/preset-env"，@babel/preset-react"，@babel/preset-typescript"],插件":[react-hot-loader/babel"]}App.tsx
我使用'react-hot-loader'.
import { hot } from 'react-hot-loader/root';//一些代码导出默认热点(App)；如果我更改代码 'webpack-dev-server' 显示
我wdm":编译...
./src/App.tsx 1.62 KiB [内置] [代码生成]
iwdm":编译成功.
这里是 package.json
{名称":应用程序"，版本":0.1.0"，私人":真的，依赖关系":{@testing-library/jest-dom":^5.11.6"，@testing-library/react":^11.1.2"，@testing-library/user-event":^12.2.2"，@types/jest":^26.0.15"，@types/node":^12.19.5"，@types/react":^16.9.56"，@types/react-dom":^16.9.9"，反应":^ 17.0.1"，react-dom":^17.0.1"，反应脚本":4.0.0"，打字稿":^4.0.5"，网络生活":^0.2.4"},脚本":{开始":webpack 服务"，构建":webpack"，测试":反应脚本测试"，弹出":反应脚本弹出"；},eslintConfig":{扩展":[反应应用程序"，反应应用程序/笑话"]},浏览器列表":{生产":[＞0.2%"，没死"，不是 op_mini 全部"],发展":[最后一个 chrome 版本"，最后一个 Firefox 版本"，最后 1 个 safari 版本"]},开发依赖":{@babel/core":^7.12.3"，@babel/preset-env":^7.12.7"，@babel/preset-react":^7.12.7"，@babel/preset-typescript":^7.12.7"，@hot-loader/react-dom":^17.0.0"，awesome-typescript-loader":^5.2.1"，babel-loader":^8.1.0"，clean-webpack-plugin":^3.0.0"，copy-webpack-plugin":^6.3.2"，fork-ts-checker-webpack-plugin":^6.0.3"，html-webpack-plugin":^5.0.0-alpha.14"，image-minimizer-webpack-plugin":^1.0.0"，imagemin-gifsicle":^7.0.0"，imagemin-mozjpeg":^9.0.0"，imagemin-pngquant":^9.0.1"，imagemin-svgo":^8.0.0"，原始加载器":^4.0.2"，反应热加载器":^ 4.13.0"，sass":^1.29.0"，sass-loader":^10.1.0"，ts-loader":^8.0.11"，url-loader":^4.1.1"，webpack":^5.6.0"，webpack-cli":^4.2.0"，webpack-dev-server":^3.11.0"；}}有一个 bug https://github.com/webpack/webpack-dev-server/issues/2758 当使用 browserslist 和 webpack-dev-server 和 webpack 5 目前，您可以设置 target: 'web' 来解决这个问题，直到 webpack-dev-server v4 已发布.
Hot Module Replacement '[HMR] Waiting for update signal from WDS...' forever, how to enable Hot Module Replacement or send signal from Webpack Dev Server?
I want Hot Module Replacement be enabled.Therefore, I set hot: true in webpack.config.js.
I stuck at
I expected to see
I tried webpack serve --hot --inline command, but I got nothing...
webpack.config.js
// Paths
const path = require('path');
const srcPath = path.join(__dirname, 'src');
const distPath = path.join(__dirname, 'dist');
const publicPath = path.join(__dirname, 'public');
// Plugins...
// Modules
module.exports = {
mode: 'development',
entry: path.join(srcPath, 'index.tsx'),
output: {
path: distPath,
filename: 'bundle.js',
},
module: {
rules: [
// TypeScript
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: ['babel-loader']
},
},
// resolves...
devServer: {
contentBase: distPath,
historyApiFallback: true,
hot: true,
inline: true,
writeToDisk: true
},
// plugins...
.babelrc
// .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
"react-hot-loader/babel"
]
}
App.tsx
I use 'react-hot-loader'.
import { hot } from 'react-hot-loader/root';
// some codes
export default hot(App);
if I change code 'webpack-dev-server' shows
Here is package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.1.2",
"@testing-library/user-event": "^12.2.2",
"@types/jest": "^26.0.15",
"@types/node": "^12.19.5",
"@types/react": "^16.9.56",
"@types/react-dom": "^16.9.9",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"typescript": "^4.0.5",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "webpack serve",
"build": "webpack",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.7",
"@babel/preset-react": "^7.12.7",
"@babel/preset-typescript": "^7.12.7",
"@hot-loader/react-dom": "^17.0.0",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.3.2",
"fork-ts-checker-webpack-plugin": "^6.0.3",
"html-webpack-plugin": "^5.0.0-alpha.14",
"image-minimizer-webpack-plugin": "^1.0.0",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.1",
"imagemin-svgo": "^8.0.0",
"raw-loader": "^4.0.2",
"react-hot-loader": "^4.13.0",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"ts-loader": "^8.0.11",
"url-loader": "^4.1.1",
"webpack": "^5.6.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
}
}
There's a bug https://github.com/webpack/webpack-dev-server/issues/2758 when using browserslist with webpack-dev-server and webpack 5 at the moment, you can set target: 'web' to work around the issue until webpack-dev-server v4 is out.
这篇关于Hot Module Replacement '[HMR] Waiting for update signal from WDS...'永远，如何启用热模块更换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！