После того, как я настроил веб-пакеты для управления всеми моими активами. Пришло время мне поработать. На данный момент, каждый раз, когда я вношу какие-либо изменения в код, мне нужно обновлять веб-браузер, чтобы увидеть изменения в действии. Это особенно раздражает, когда я нахожусь на очень интенсивной стадии разработки, поэтому функция, называемая горячей загрузкой, является ответом. Сегодня я расскажу, как настроить эту функцию.
Шаг 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
Наконец, теперь я могу запустить сервер, и всякий раз, когда я вношу изменения в компонент, браузер автоматически перезагружает обновленный контент.
Ура, увидимся в следующем посте
примечания: Вероятно, есть много способов реализовать эту функцию, и именно так я нахожу самый простой способ реализовать это. Кто угодно может комментировать любые ошибки или улучшения, которые я могу применить. Изначально это руководство предназначено для меня самого, чтобы узнать и вспомнить о том, что я сделал, тем не менее, любой может следовать этому руководству, если вы сочтете его очень полезным.