如何在webpack中正确安装react-hot-loader？

Question

我试着安装了react-hot-loader，但是这不起作用，我得到了错误

main.9d9605180f32844bc508.css
Cannot use [chunkhash] or [contenthash] for chunk in '[name].[contenthash].js' (use [hash] instead)

webpack配置

module.exports = {
        context: path.resolve(__dirname, 'src'),
        mode: 'production',
        entry: {
            main: ['webpack-dev-server/client?http://localhost:9090', '@babel/polyfill', './index.jsx']
        },
        resolve: {
            extensions: ['.js', '.jsx', '.sass', '.scss', '.css', '.png', '.jpg', '.json'],
            alias: {
                '@': path.resolve(__dirname, 'src')
            }
        },
        devServer: {
            port: 9090,
            hot: isDev
        }

和jsx的加载器

{
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: [
                    'react-hot-loader/webpack',
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-react']
                        }
                    },
                    'eslint-loader'
                ]
            },

对于npm命令

"scripts": {
    "start": "webpack-dev-server --mode=development",
    "build": "webpack --mode=production",
    "dev": "webpack-dev-server --hot -w --mode=development"
  }

如何正确安装react-hot-loader？

Answer 1

安装这个"react-hot-loader/babel"，并添加到.babelrc into插件数组中。

npm i react-hot-loader

在您拥有状态的react组件中：

import { hot } from "react-hot-loader/root";
class YourClass extends React.Component{
  constructor(props){
  super(props)
  this.state={}
 }
render(){
return(JSX CODE)}
}

export default hot(YourClass)

在你的webpack中：

entry: {
    main: [ "react-hot-loader/patch", "./src/main.js"]
  }