【发布时间】：2020-06-25 22:29:35
【问题描述】：
我按照给定https://www.npmjs.com/package/react-hot-loader的步骤进行操作
安装 npm install react-hot-loader
将 react-hot-loader/babel 添加到您的 .babelrc：
//.babelrc { "插件": ["react-hot-loader/babel"] }
将您的根组件标记为热导出：
//Button.js
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 1,
};
}
handleClick = () =>
this.setState({
counter: this.state.counter + 1,
});
render() {
return (
<div>
<h2> Cool Counter {this.state.counter} !!!!</h2>
<button onClick={this.handleClick}>{this.state.counter}</button>
</div>
);
}
}
export default hot(Button);
//App.js
import React from 'react';
import { hot } from 'react-hot-loader/root';
import Button from './controls/Button';
const App = () => (
<div style={{ color: 'purple' }}>
<Button />
</div>
);
export default hot(App);
确保在 react 和 react-dom 之前需要 react-hot-loader：
//Main.js
import 'react-hot-loader';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './main.scss';
ReactDOM.render(<App />, document.getElementById('container'));
如果您需要 hooks 支持，请使用 @hot-loader/react-dom
npm install @hot-loader/react-dom
使用 webpack 别名
// webpack.config.js
module.exports = {
// ...
resolve: {
alias: {
'react-dom': '@hot-loader/react-dom',
},
},
};
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React-Hot-Loader-Test</title>
</head>
<body>
<div id="container"></div>
<script src="/public/main.js"></script>
<link href="/public/main.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</body>
//server.js
var webpack = require('webpack');
var WebPackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebPackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
}).listen(8080, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}
console.log('Listening on localhost:8080');
});
//webpack.config.js
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
entry: {
main: ['react-hot-loader/patch', './src/main.js'],
},
resolve: {
alias: {
'react-dom': '@hot-loader/react-dom',
},
modules: [path.resolve('./src'), path.resolve('./node_modules')],
},
output: {
path: path.resolve(__dirname, 'public'),
filename: devMode ? '[name].js' : '[name].[chunkhash].js',
publicPath: '/public/',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['react-hot-loader/webpack', 'babel-loader'],
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? '[name].css' : 's[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
}),
],
};
//.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties", "react-hot-loader/babel"]
}
终于运行了 2 个命令
1. webpack -d
2. node server.js
结果： λ节点服务器启动并运行
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /public/
i ｢wds｣: Content not from webpack is served from G:\Projects\React-Second
i ｢wds｣: 404s will fallback to /index.html
react 热加载仅适用于 html、css、jsx 更改
问题： Hooks 在单击按钮时不存储先前的状态，然后更改任何 css、html 或 jsx、UseState 或 Set 状态而不保留状态，它始终以 1 开头。
请帮助我错过了什么，我正在努力工作几个小时。
问候
沙兹
【问题讨论】：
标签： reactjs webpack-dev-server webpack-4 react-hot-loader