所以我为我的 React 应用程序设置了一个最小配置,我[HMR] Waiting for update signal from WDS...
在控制台中看到了这条消息,我的浏览器页面没有反映任何变化
根据这个解决方案,我试图添加@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>
);
}
和我的.babelrc
conf:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}