Блог

Поставляется ли приложение create-react со встроенной поддержкой HMR? Я видел, как приложение react перезагружается при изменениях. Но это не ХМР. Какую конфигурацию веб-пакета мне нужно добавить, чтобы включить HMR. Я читал в Интернете о настройке hot параметра в webpack-dev-serve true . Меня смущает HMR в react.

После недолгих поисков я наткнулся на это

 import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'

// Opt-in to Webpack hot module replacement
if (module.hot) module.hot.accept()

ReactDOM.render(
  <App />,
  document.getElementById('app')
)
 

Затем он говорит добавить HotModuleReplacementPlugin в webpack.config.js
Нужно ли мне добавлять его вручную, или он будет добавлен заранее. Также я читал, что использует react ReactRefreshWebpackPlugin . Я в замешательстве, пожалуйста, помогите.

Вы можете найти ответ на свой вопрос здесь: https://www.youtube.com/watch?v=f-ctxG2qEpsamp;t=279s

Если вы хотите настроить HMR с нуля, взгляните на это: https://github.com/pmmmwh/react-refresh-webpack-plugin/

Не забудьте добавить эту строку в devServer:

 devServer: {
    hot: true,
    liveReload: false,
},
 

Для рабочего примера взгляните на это репо: https://github.com/matheus4lves/react-pagination

Используя webpack-dev-сервер, мы можем настроить замену горячих модулей с помощью React. Это означает, что всякий раз, когда мы изменяем компонент и сохраняем файл, webpack заменит модуль на странице без перезагрузки, без потери состояния компонента.

 npm install react-hot-loader --save-dev
 

Чтобы использовать загрузчик react-hot-loader, мы можем просто добавить его в массив загрузчиков в объекте загрузчика.

 {
  test: /.js$/,
  exclude: /node_modules/,
  loaders: ["react-hot", "babel-loader"],
}
 

Всякий раз, когда обнаруживаются соответствующие файлы, они сначала передаются через react-hot, а затем через babel-загрузчик.

Наконец, нам нужно запустить webpack-dev-сервер с двумя новыми опциями:

 webpack-dev-server --hot --inline
 

P. S

Перед этим нам необходимо настроить webpack-dev-сервер, для этого нам необходимо установить webpack-dev-сервер как локально, так и глобально. Вы можете установить его с помощью следующей команды:

 npm install webpack-dev-server --global

npm install webpack-dev-server --save-dev