Как правильно установить реактив-hot-loader в веб-пакете?

Question

Я попытался установить ответный горячий загрузчик, но это не работает, и я получаю ошибку

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

webpack config

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"
  }

как правильно установить ответную-горячую загрузку?

Answer 1

установите этот «act-hot-loader / babel »и добавьте в .babelr c в массив плагинов.

npm i react-hot-loader

в компоненте реагирования, который у вас есть:

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)

в вашем веб-пакете:

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