首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >热模块替换“[HMR]等待来自WDS的更新信号.”永远,如何启用热模块更换?

热模块替换“[HMR]等待来自WDS的更新信号.”永远,如何启用热模块更换?
EN

Stack Overflow用户
提问于 2020-11-24 13:39:50
回答 1查看 4.1K关注 0票数 2

热模块替换'HMR等待更新信号从WDS.‘永远,如何启用热模块更换或发送信号从Webpack发展服务器?

我要启用热模块更换。因此,我在hot: true中设置了webpack.config.js。

我坚持住

等待来自WDS的更新信号..。

我希望能看到

等待来自WDS的更新信号..。 启用热模块替换。

我试过webpack serve --hot --inline命令,但我什么也没有.

webpack.config.js

代码语言:javascript
运行
复制
// 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

代码语言:javascript
运行
复制
// .babelrc
{
    "presets": [
        "@babel/preset-env", 
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "react-hot-loader/babel"
    ]
}

App.tsx

我用的是“反应热装载机”。

代码语言:javascript
运行
复制
import { hot } from 'react-hot-loader/root';

// some codes

export default hot(App);

如果我更改代码'webpack-dev-server‘显示

我“wdm”:编译..。 ./src/App.tsx 1.62构建的KiB I“wdm”:编译成功。

这是package.json

代码语言:javascript
运行
复制
{
  "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"
  }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-24 14:01:20

在使用https://github.com/webpack/webpack-dev-server/issues/2758webpack-dev-serverwebpack 5一起使用browserslist时,您可以设置target: 'web'来解决这个问题,直到webpack开发服务器v4退出为止。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64987723

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档