javascript - 无法设置 HMR : stuck with "Waiting for update signal from WDS..." in console

Question

所以我正在为我的 React 应用程序设置最小配置，我在控制台中遇到了 [HMR] Waiting for update signal from WDS... 消息，而我的浏览器页面却没有反射(reflect)任何变化

根据this解决方案我曾尝试添加@babel/preset-env，但没有成功。我不认为这是问题的根源，因为即使我更改了 index.js 文件，浏览器中也没有应用任何更改

我的webpack.config.js:

const { HotModuleReplacementPlugin } = require('webpack');

module.exports = {
  mode: 'development',
  devServer: {
    watchContentBase: true,
    publicPath: '/dist/',
    hot: true
  },
  plugins: [new HotModuleReplacementPlugin()],
  module: {
    rules: [{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

src/index.js:

import React from 'react';
import { render as r } from 'react-dom';
import App from './App';

r(<App />, document.querySelector('#root'));

src/App.jsx:

import React from 'react';

export default function App() {
  return (
    <div>
      <h1>Hello from React Version: {React.version}</h1>
    </div>
  );
}

和我的.babelrcconf:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Answer 1

在使用 webpack 5、webpack-dev-sever 时，我遇到了同样的问题:[HMR] Waiting for update signal from WDS... 和 browserslist。

将 browserslist 与 webpack 5 和 webpack-dev-sever 一起使用时，这似乎是一个错误 answered by chenxsan here 。有关该错误的更多信息可以找到 here .

解决方案(目前)是将 target: 'web' 添加到 webpack 配置中。示例:

// webpack.config.js

module.exports = {
  devServer: {
    hot: true
  },
  target: 'web',
  mode: 'development',
  [...]
}