После того, как я настроил веб-пакеты для управления всеми моими активами. Пришло время мне поработать. На данный момент, каждый раз, когда я вношу какие-либо изменения в код, мне нужно обновлять веб-браузер, чтобы увидеть изменения в действии. Это особенно раздражает, когда я нахожусь на очень интенсивной стадии разработки, поэтому функция, называемая горячей загрузкой, является ответом. Сегодня я расскажу, как настроить эту функцию.

Шаг 1

Поскольку я использую экспресс для управления сервером, я буду использовать промежуточное программное обеспечение для реализации функции горячей загрузки. Затем мне нужно настроить несколько параметров для существующего промежуточного программного обеспечения для разработчиков.

#server/index.js
##new codes
import webpackHotMiddleware from 'webpack-hot-middleware';
const compiler = webpack(webpackConfig);
app.use(webpackHotMiddleware(compiler));
##modified codes
app.use(webpackMiddleware(compiler, {
 hot: true,
 publicPath: webpackConfig.output.publicPath,
 noInfo: true
}));

Поскольку мне нужно применить webPackConfig в нескольких местах, я просто назначу его константе и буду использовать.

Шаг 2

Мне также нужно будет изменить файл конфигурации веб-пакета, как показано ниже

#webpack.config.dev.js
##new import
import webpack from 'webpack';
##in entry:
entry: [
  'react-hot-loader/patch',
  'webpack-hot-middleware/client',
 ],
##in output
output: {
  publicPath: '/'
 },
##add plugin
plugins: [
  new webpack.NoEmitOnErrorsPlugin(),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.HotModuleReplacementPlugin()
 ],

Мне также нужно будет настроить реакцию для перезагрузки, когда это необходимо, поэтому мне также нужно будет изменить файл babelrc.

#.babelrc
"plugins": ["react-hot-loader/babel"]

Шаг 3

Прежде чем он сможет работать должным образом, компонент App, который я отрендерил в div с именем app, должен быть обернут контейнером. Ниже приведены коды

#client/index.js
import React, { Component } from 'react';
import {render} from 'react-dom';
import App from './components/App';
import {AppContainer} from 'react-hot-loader';
render(
      <AppContainer>
        <App />
      </AppContainer>,
      document.getElementById('app')
    );
if (module.hot) {
  module.hot.accept('./components/App', () => {
    const App = require('./components/App').default;
    render(
      <AppContainer>
        <App />
      </AppContainer>,
      document.getElementById('app')
    );
  });
}

Шаг 4

Мне нужно будет установить все необходимые модули.

#terminal
npm install --save-dev react-hot-loader@next webpack-hot-middleware

Наконец, теперь я могу запустить сервер, и всякий раз, когда я вношу изменения в компонент, браузер автоматически перезагружает обновленный контент.

Ура, увидимся в следующем посте

Ресурс Github

примечания: Вероятно, есть много способов реализовать эту функцию, и именно так я нахожу самый простой способ реализовать это. Кто угодно может комментировать любые ошибки или улучшения, которые я могу применить. Изначально это руководство предназначено для меня самого, чтобы узнать и вспомнить о том, что я сделал, тем не менее, любой может следовать этому руководству, если вы сочтете его очень полезным.