react hot loader что это
WebPack: как внутри устроено Hot Reloading
Наша платформа voximplant активно использует javascript. С помощью него клиенты управляют в реальном времени звонками, на нем работает наша backend логика и большинство frontend. Javascript мы любим, ценим и стараемся быть в курсе последних новостей. Сейчас наши разработчики активно экспериментируют с перспективной связкой webpack + typescript + react (кстати, для typescript мы сделали type definitions к нашему web sdk, но об этом как-нибудь в другой раз).
Особенно нам нравится «hot module replacement»: возможность при изменении исходников очень быстро отобразить изменения в браузере без перезагрузки страницы. Выглядит как магия. К сожалению, документировано тоже как магия — по словам eyeofhell, нашего технического евангелиста, «пример на офсайте — это уникальная комбинация частных случаев и особых команд, любое изменение в которых делает его неработоспособным». На наш взгляд все не так плохо, за пару вечеров вполне можно разобраться. Но и не так просто, как хотелось бы. Поэтому специально для Хабра под катом мы максимально просто и понятно расскажем как работает под капотом вся эта машинерия.
Магия как она есть
Официальный пример использования hot module replacement очень прост. Авторы предлагают создать файл style.css с одним стилем:
И файл entry.js, который использует основную фичу webpack, команду require, чтобы добавить .css файл к содержимому страницы. Ну и создает элемент типа input, на котором можно проверить hot module replacement:
Далее предлагается запустить webpack с помощью заклинания
И открыть страницу, доступную по адресу localhost:8080/bundle. После чего можно наблюдать магию hot module replacement: если ввести в поле input какой-нибудь текст, переместить курсор на один из символов этого текста, а затем поменять цвет в файле style.css — то цвет фона страницы поменяется практически сразу, при этом не потеряется введенный текст и даже позиция курсора останется прежней.
Хорошая, удобная магия. Но после начала использования возникает много вопросов:
Разоблачение магии
Начнем с самого простого. ./entry и —module-bind — это читерские аргументы, которые позволяют в целях демонстрации запускать webpack без конфигурационного файла webpack.config.js. Первый позиционный аргумент всего лишь имя javascript файла, являющегося «точкой входа» в программу, именно его код будет запускаться при выполнении скомпилированной bundle. Многих разработчиков смущает то, что этот аргумент не выглядит как имя файла. На самом деле это имя файла. Просто в целях экономии символов авторы примера воспользовались одной из особенностей webpack: файлы в require и в командной строке можно указывать без расширения, webpack автоматически попробует найти такой файл .js (или с другими расширениями, если это настроено в конфигурации). Аргумент —module-bind позволяет без конфигурационного файла указать используемые загрузчики, в данном случае для файлов с расширением css будет использован сначала загрузчик css-loader а затем загрузчик style-loader. Как нетрудно догадаться, суффикс -loader тоже можно не указывать, и авторы примера пользуются этим для экономии нескольких символов и запутывания читателей.
Режим работы «iframe automatic refresh» и встроенный веб сервер
На самом деле у webpack три режима работы автоматического обновления страницы. Самый простой режим называется iframe mode: он включается автоматически, если webpack запустить без ключей командной строки —inline и —hot, то есть вот так:
Запущенный веб сервер будет отдавать браузеру следующие страницы:
Режим работы «inline automatic refresh» и встраиваемый refresh client
Второй режим работы активируется ключом командной строки —inline и предсказуемо называется «inline» режимом. В этом режиме все несколько сложнее: в bundle добавляется модуль «refresh client», исходный код которого можно посмотреть в файле webpack-dev-server/client/index.js. Этот модуль будет загружен с помощью require перед вашим собственным кодом. Более того, если посмотреть в сгенерированный bundle (с помощью меню веб сервера, о котором я писал выше), то можно увидеть что этот require не совсем обычный:
Это результат выполнения вот такого кода:
Этот слабодокументированный синтаксис «webpack resource query» позволяет передавать произвольные параметры в загружаемый через require код. В данном случае webpack-dev-server генерирует bundle, который при загрузке refresh client передает ему адрес запущенного на машине разработчика webpack-dev-server. Зачем ему адрес? Конечно же чтобы подключиться к серверу через socketio и ждать нотификации об изменениях файлов. Получив такую нотификацию, refresh client перезагрузит страницу. По сути происходит то же что и с iframe, но без iframe. Это позволяет отлаживать чувствительный к url код и используется как вспомогательный механизм для третьего, самого интересного режима работы: hot module replacement
hot module replacement: сильное колдунство для быстрой разработки
Как уже догадался внимательный читатель, третий режим работы включается добавлением ключа командной строки —hot, который возвращает нас к тому заклинанию, с которого началась эта статья. Но здесь не все так просто. «Hot module replacement» — это функциональность webpack, предназначенная не только для быстрой подгрузки изменений на машине разработчика, но и для обновления сайтов в production. При использовании ключа —hot bundle будет собран с поддержкой hot module replacement: соответствующий код и api добавляется в загрузчик webpack, за это отвечает HotModuleReplacementPlugin. Ключ —hot понимает как webpack-dev-server, так и webpack. С помощью hot module replacement api разработчик может запрашивать свой сервер на предмет «а не обновилось ли что», отсылать команду «обновись» дереву модулей и управлять тем, как модули обновляются без перезагрузки страницы.
Здесь два ключевых момента:
Учитывая эти два момента, просто добавление кода hot module replacement ничего не даст — только увеличит размер bundle на несколько килобайт. Нужен еще код, который будет общаться с сервером, узнавать о наличии обновлений и вызывать module.hot.check. И такой код есть! webpack-dev-server, запущенный с ключом —hot, добавляет в собираемый bundle модуль «hot loader», исходник которого можно посмотреть в файле webpack/hot/dev-server.js. Этот модуль, так же как модуль «refresh client», будет загружен перед вашим кодом. Делает он интересную штуку: подписывается на dom event с именем webpackHotUpdate и при получении этого эвента использует hot module replacement api для обновления дерева модулей. Если модули не обновились (то есть в модулях либо нет кода обновления, либо код вернул статус невозможности обновиться), то hot loader перезагружает страницу целиком.
А кто же отсылает эвент webpackHotUpdate? Это делает «refresh client». Тот самый, который добавляется ключем —inline, поддерживает websocket подключение к webpack-dev-server и следит за изменениями файлов. При использовании ключа —hot, webpack-dev-server отправляет refresh client по websocket сообщение «hot», которое переключает refresh client в «hot mode». В этом режиме он перестает обновлять страницу сам, а вместо этого отсылает эвент webpackHotUpdate.
Последний вопрос: откуда берется код, который обновляет CSS стили? Как я уже написал выше, webpack сам ничего обновлять не будет и просто вызовет callback, на который может подписаться модуль. Откуда там этот callback? Сюрприз — style-loader имеет встроенную поддержку «hot module replacement». Специально для того, чтобы работал пример из документации.
Настройка webpack 5 [bonus] React Hot Reloading
Базовая настройка webpack 5 + настройка для разработки на React (вкл. React Hot Reloading).
Что, зачем и почему?
Зачем? Webpack позволяет комфортно создавать приложения по модульной структуре, он собирает все модули в один бандл и минифицирует его. Но это лишь поверхностное описание возможностей этого инструмента, на деле вебпак имеет значительно больше возможностей.
Почему? Потому что webpack использует свою power для сбережения вашей motivation в процессе разработки, ведь теперь больше нет необходимости беспокоится о сборке проекта, один раз настроил webpack и он все будет делать за вас!
P.S. Ну, или не один раз.
P.S.S. Ладно, точно не один раз.
Установка webpack
Для начала инициализируем наш проект:
Начинаем настройку
В папке src создадим файл index.js и напишем в нем любой код в ES6+ синтаксисе, например:
Переходим в файл webpack.config.js
Из этого файла мы экспортируем объект, содержащий все настройки вебпака.
Для начала укажем точки входа и выхода проекта:
Настраиваем webpack для разработки
Дополним module.exports в webpack.config.js следующими свойствами:
Теперь перейдем в файл package.json и создадим скрипты для нашего проекта:
Режимы сборки
Режим сборки указывается в свойстве mode в настройках webpack, для правильной работы скриптов в webpack.config.js внесем следующие изменения:
Плагины и загрузчики
Именно благодаря плагинам и загрузчикам webpack является действительно мощным инструментом, ведь по умолчанию вебпак умеет обрабатывать только js и json.
Ассеты
Для комфортного использования ассетов обновим output в webpack.config.js :
Добавляем поддержку HTML
Для поддержки HTML нам понадобится загрузчик html-loader и html-webpack-plugin :
Вносим изменения в webpack.config.js :
html-webpack-plugin автоматически импортирует главный javascript-файл в документ, поэтому нет необходимости это делать вручную.
Добавляем поддержку стилей
Или, если вы используете less:
Вносим изменения в webpack.config.js :
Browserslist
В webpack.config.js вносим следующие изменения:
Добавляем поддержку изображений и шрифтов
Для обработки изображений и шрифтов в конфигурации вебпака в module.rules добавим следующие правила:
Babel
В корне проекта создадим файл babel.config.js и экспортируем данный объект:
Далее в webpack.config.js добавим следующее правило в module.rules :
Теперь, если соберем проект:
И посмотрим в папке dist на наш код из начала статьи в ES6+ синтаксисе, мы увидим, что теперь современные функции JavaScript заменены на полифилы.
На этом базовая настрока webpack подходит к концу, вы можете использовать данную сборку для своих проектов. Далее будет рассмотрена настройка webpack для работы с React, а также в конце статьи вы сможете найти полезные ссылки(в том числе на github данной сборки).
[bonus] Настройка webpack для работы с React
Установим необходимые зависимости:
cross-env позволяет получить доступ к установке переменных окружения в windows.
Теперь при запуске сервера мы будем передавать SERVE=true через переменные окружения. Внесем следующие изменения в наши скрипты:
Добавляем поддержку React и плагин в babel.config.js :
Последний шаг: добавим поддержку jsx и подключим плагин в webpack.config.js :
Заключение
Надеюсь эта статья помогла вам разобраться в webpack 5. На моем github размещены обе версии сборки webpack: базовая сборка и сборка для React.
Спасибо за прочтение и с наступающим 2022-м годом!
React-Hot-Loader v4.6
Примерно месяц назад вышли React Hooks, и сразу же выяснилось что React-Hot-Loader портит все малину и не только сам с ними не очень совместим, так еще и весь остальной код ломает. В общем это был жаркий месяц.
Что внутри?
Новый API для HMR
На самом деле новый hot это просто старый, разделенный на две части. В итоге можно детектировать ситуации когда первая часть была вызвана, а вторая нет (подробности).
React 16.6 support
И конечно же все работает прямо из кробки.
React Hooks support
После выхода 16.7 стало понятно, что с Hooks беда. К сожалению этой беде были подвержены такие крупные проекты как StoryBook(issue) и Gatsby(issue).
Проблема итекала из самой природы React-Hot-Loader — для того чтобы обмануть React и предотвратить уничтожение старой версии дерева HotLoader оборачивает каждый компонент во враппер, который меняет только ссылку на «реальный» компонент внутри себя.
Конечно же SFC были обернуты в Components, и все сломалось.
На самом деле SFC оборачивались с SFC, которые возвращали экземпляр Класса. Очень недокументированная «фабричная» фича Реакта.
Сообщество быстро нашло выход(до которого я сам с ходу не додумался), благо надо было только изменить одну опцию —
React-Hot-Dom
К сожалению никакого API для этого сам реакт не предоставляет, потому мы выпустили специальный пакет — hot-loader/react-dom со всеми нужными патчами.
Поставить «patch» просто:
Для тех кому ставить левые пакеты не хочется — в комплекте идет webpack-loader который пропатчит конкретно вашу версию react-dom.
Webpack-loader
Тот самый webpack loader, который мы прибили в версии 4, вернулся к нам опять. Зачем?
Automagic ErrorBoundaries
Ошибки во время разработки — любимое дело, но ошибки+react-hot-loader не любил никто — работало просто не очень, а иногда так вообще не работало.
Вроде как мелочь, но эта мелочь меняет весь процесс разработки. Ну и конечно же все настраивается на свой вкус.
«Pure» Render
Эта проблема была с Hot-Loader всегда. Пока носом не ткнули. Если кратко — в React Dev Tools можно по правому клику открыть меню, и прыгнуть прямо к компоненту… Точнее (было) нельзя этого сделать
К сожалению это работает только для «Class based» компонентов, для SFC требуется патч в react-dom, про который говорилось выше.
В принципе сейчас есть возможность практически скрыть присуствует HotLoader в системе.
Principles
Буквально неделю назад Dan Abramov опубликовал свой wish list для hot-loader — 22 принципа, которым hot-loader должен соотвествовать чтобы быть если не белым и пушистым, то «правильным».
В настоящий момент 14 пункта выполнены 100%, и еще 4 на 50%. Итого — 17 из 22. В принципе не плохо, и ясно что нужно сделать, чтобы добить остальные.
Кто знает, быть можно после этого Дэн вернется в проект.
React hot loader что это
Tweak React components in real time вљ›пёЏвљЎпёЏ
Moving towards next step
React-Hot-Loader has been your friendly neighbour, living outside of React. But it has been limiting its powers and causing not the greatest experience. It’s time to make a next step.
React-Hot-Loader is expected to be replaced by React Fast Refresh. Please remove React-Hot-Loader if Fast Refresh is currently supported on your environment.
Note: You can safely install react-hot-loader as a regular dependency instead of a dev dependency as it automatically ensures it is not executed in production and the footprint is minimal.
Plus
Hooks would be reset if their order changes. Adding, removing or moving around would cause a local tree remount.
Babel plugin is required for this operation. Without it changing hook order would throw an error which would be propagated till the nearest class-based component.
@hot-loader/react-dom replaces the «react-dom» package of the same version, but with additional patches to support hot reloading.
There are 2 ways to install it:
Meanwhile, not all the bundlers are compatible with new /root API, for example parcel is not.
What about production?
Just ensure that the production mode has been properly set, both as an environment variable and in your bundler. E.g. with webpack you would build your code by running something like:
Make sure to watch your bundle size when implementing react-hot-loader to ensure that you did it correctly.
Migrating from create-react-app without ejecting
Users report, that it is possible to use react-app-rewire-hot-loader to setup React-hot-loader without ejecting.
As of version 4, React Hot Loader requires you to pass your code through Babel to transform it so that it can be hot-reloaded. This can be a pain point for TypeScript users, who usually do not need to integrate Babel as part of their build process.
A sample configuration:
For a full example configuration of TypeScript with React Hot Loader and newest beta version of Babel, check here.
As an alternative to this approach, it’s possible to chain Webpack loaders so that your code passes through Babel and then TypeScript (or TypeScript and then Babel), but this approach is not recommended as it is more complex and may be significantly less performant. Read more discussion here.
Parcel supports Hot Module Reloading out of the box, just follow step 1 and 2 of Getting Started.
You need something to mark your modules as hot in order to use React Hot Loader.
One way of doing this with Electron is to simply use webpack like any web-based project might do and the general guide above describes. See also this example Electron app.
If you use devtool: ‘source-map’ (or its equivalent), source maps will be emitted to hide hot reloading code.
Source maps slow down your project. Use devtool: ‘eval’ for best build performance.
Hot reloading code is just one line in the beginning and one line at the end of each module so you might not need source maps at all.
If you are using npm link or yarn link for development purposes, there is a chance you will get error Module not found: Error: Cannot resolve module ‘react-hot-loader’ or the linked package is not hot reloaded.
There are 2 ways to fix Module not found :
React Native supports hot reloading natively as of version 0.22.
Using React Hot Loader with React Native can cause unexpected issues (see #824) and is not recommended.
We recommend using the babel plugin, but there are some situations where you are unable to. If so, try the webpack plugin / webpack-loader (as seen in v3).
But webpack-loader could help with TypeScript or spreading «cold API» to all node_modules.
It is possible to enable this loader for all the files, but if you use babel plugin, you need to enable this loader for react-dom only. Place it after babel-loader, if babel-loader is present.
Webpack plugin will also land a «hot» patch to react-dom, making React-Hot-Loader more compliant to the principles.
If you are not using babel plugin you might need to apply webpack-loader to all the files.
If you want to use Code Splitting + React Hot Loader, the simplest solution is to pick a library compatible with this one:
If you use a not-yet-friendly library, like react-async-component, or are having problems with hot reloading failing to reload code-split components, you can manually mark the components below the code-split boundaries.
Note that Hello is the component at the root of this particular code-split chunk.
Wrapping this root component with hot() will ensure that it is hot reloaded correctly.
You may see the following warning when code-split components are updated:
In this case, RHL uses a special tail update detection logic, where it notes that an an update to a split component has happened after the core hot reloading logic has already finished, and it triggers another update cycle to ensure that all changes are applied.
Checking Element type s
Because React Hot Loader creates proxied versions of your components, comparing reference types of elements won’t work:
React Hot Loader exposes a function areComponentsEqual to make it possible:
But you might have to provide all required props. See original issue. This is most reliable way to compare components, but it will not work with required props.
Not all components have a name. In production displayName could not exists.
This is something we did not solve yet. Cold API could help keep original types.
webpack ExtractTextPlugin is not compatible with React Hot Loader. Please disable it in development:
Disabling a type change (вќ„пёЏ)
It is possible to disable React-Hot-Loader for a specific component, especially to enable common way to type comparison. See #991 for the idea behind в›„пёЏ, and #304 about «type comparison» problem.
If you will update cold component React-Hot-Loader will complain (on error level), and then React will cold-replace Component with a internal state lose.
Reach-Hot-Loader: cold element got updated
Disabling a type change for all node_modules
You may cold all components from node_modules. This will not work for HOC(like Redux) or dynamically created Components, but might help in most of situations, when type changes are not welcomed, and modules are not expected to change.
! To be able to «cold» components from ‘node_modules’ you have to apply babel to node_modules, while this folder is usually excluded. You may add one more babel-loader, with only one React-Hot-Loader plugin inside to solve this. Consider using webpack-loader for this.
React hooks are not really supported by React-Hot-Loader. Mostly due to our internal processes of re-rendering React Tree, which is required to reconcile an updated application before React will try to rerender it, and fail to do that, obviously.
Mark a component as hot.
Right now babel plugin has only one option, enabled by default.
You may disable it to get more control on the module execution order.
To make RHL more reliable and safe, please place hot below (ie somewhere in imported modules):
You may(but it’s not required) place hot to the every route/page/feature/lazy chunk, thus make updates more scoped.
(old) hot(module, options)(Component, options)
Mark application as hot reloadable. (Prefer using hot helper, see below for migration details).
This low-level approach lets you make **hot **imports__, not exports.
Test if two components have the same type.
Set a new configuration for React Hot Loader.
Available options are:
It is important to set configuration before any other action will take a place
AppContainer vs hot
React Hot Loader v3:
React Hot Loader v4:
Code is automatically patched, you can safely remove react-hot-loader/patch from your webpack config, if react-hot-loader is required before React in any other way.
Error Boundary is inside every component
On Hot Module Update we will inject componentDidCatch and a special render to every Class-based component you have, making Error Boundaries more local.
After update we will remove all sugar, keeping only Boundaries you’ve created.
Setting global Error Reporter
You may change, or disable this global error overlay
The UX of existing overlay is a subject to change, and we are open to any proposals.
Known limitations and side effects
hot accepts only React Component (Stateful or Stateless), resulting the HotExported variant of it. The hot function will setup current module to self-accept itself on reload, and will ignore all the changes, made for non-React components. You may mark as many modules as you want. But HotExportedComponent should be the only used export of a hot-module.
Note: Please note how often we have used exported keyword. hot is for exports.
Note: Does nothing in production mode, just passes App through.
New Components keep executing the old code
There is no way to hot-update constructor code, as result even new components will be born as the first ones, and then grow into the last ones. As of today, this issue cannot be solved.
If it doesn’t work, in 99% of cases it’s a configuration issue. A missing option, a wrong path or port. webpack is very strict about configuration, and the best way to find out what’s wrong is to compare your project to an already working setup, check out examples, bit by bit.
If something doesn’t work, in 99% of cases it’s an issue with your code. The Component didn’t get registered, due to HOC or Decorator around it, which is making it invisible to the Babel plugin or webpack loader.
We’re also gathering Troubleshooting Recipes so send a PR if you have a lesson to share!
Switch into debug mode
Debug mode adds additional warnings and can tells you why React Hot Loader is not working properly in your application.
This project exists thanks to all the people who contribute. Contribute. 
Thank you to all our backers! рџ™Џ Become a backer 
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor