Как Webpack настраивает горячие обновления

Webpack
Как Webpack настраивает горячие обновления

Что такое ХМР

Относится кHot Module Replacement,сокращенноHMR. Для модуля, который необходимо обновить, выполните «горячую» замену, которая представляет собой плавное обновление изменения без необходимости обновления страницы. Если вы не настроитеHMR, то каждый раз при внесении изменения нужно обновлять страницу, чтобы увидеть результат после изменения.Для отладки это очень хлопотно и неэффективно.Самое главное, что изменяемые вами данные на интерфейсе будут обновляться с обновление страницы будет потеряно, а если есть что-то вродеWebpackЕсли существует механизм горячего обновления, то модифицируется код, который не вызывает обновления, а сохраняет существующее состояние данных, а только обновляет и заменяет модуль. Другими словами, существующее состояние данных сохраняется, и можно увидеть изменения после модификации кода.

Суммировать:

  • Сохранить состояние приложения при загрузке страницы
  • Обновляйте только то, что изменилось, экономя время на отладку
  • Изменение стилей выполняется быстрее, почти эквивалентно изменению стилей в браузере.

Установить зависимости

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

package.json:

"dependencies": {
    "webpack": "^4.41.2",
    "webpack-dev-server": "^3.10.1"
},

настроить

webpack:

devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true,
    historyApiFallback: true,
    compress: true
},

  • hotдляtrue, что означает включить горячее обновление

  • contentBaseПредставление сообщает серверу, где обслуживать контент. (То есть корневая директория запуска сервера, по умолчанию это текущая директория выполнения, вообще не нужно задавать)

  • historyApiFallbackиспользоватьHTML5запись историиAPIчас,index.htmlСкорее всего, эту страницу придется обслуживать вместо любых ответов 404.

  • compressВключить для всех службgzipкомпрессия

plugins: {
    HotModuleReplacementPlugin: new webpack.HotModuleReplacementPlugin()
},

Обновление конфигурации горячего пробки

module: {
    rules: [
        {
            test: /\.(css|less)$/,
            use: [
                process.env.NODE_ENV == 'development' ? { loader: 'style-loader' } : MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1
                    }
                }
            ]
        }
    ]
},

style-loaderбиблиотека реализуетHMRинтерфейс, при прохожденииHMRКогда обновление будет получено, оно заменит старый стиль новым. Различайте среду разработки и производственную среду, используйте разныеloader。

src/index.jsx:

if (module.hot) {
    module.hot.accept();
}

Файл входа, добавьте приведенный выше код, вот и все, очень просто.

react-hot-loader

react-hot-loaderплагин,портал

как использовать

Установить

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

настроитьbabelrc

{
  "plugins": ["react-hot-loader/babel"]
}

Пометить корневой компонент как горячий экспорт

import { hot } from 'react-hot-loader/root';
const App = () => <div>Hello World!</div>;
export default hot(App);

существуетReactа такжеReact DomПеред этим убедитесь, что вам нужноReactгорячий загрузчик

// webpack.config.js
module.exports = {
  entry: ['react-hot-loader/patch', './src'],
  // ...
};

Столкнуться с проблемами

  • Если вы столкнетесьYou cannot change <Router history>, то он должен быть настроен следующим образом:
import { hot } from 'react-hot-loader/root';
const Routes = () => {};
export default hot(Routes);
  • После настройки горячего обновления столкнулисьwebpackВысока вероятность проблемы автоматической компиляции дважды, конкретная причина не анализируется, а находится удобное решение.
watchOptions: {
    aggregateTimeout: 600
},

Могут быть и другие проблемы, например, у васindex.htmlстраница, вновь представленнаяindex.js, или установлен глобальноwebpack-dev-server, с местнымwebpack-dev-serverповторите, удалить глобальныйwebpack-dev-server, ты сможешь.

кейс

Tristana

блог

Добро пожаловать, чтобы следовать за мнойблог

Категории