Как включить HMR, когда используются CRA2 и redux?

Question

Я занимаюсь разработкой приложения React, созданного с помощью create-Reaction-app v2. Недавно я начал использовать библиотеку CSS-in-JS, а именно styled-компоненты. До этого мне было безразлично, перезагружается ли все приложение при каждом изменении или происходит горячая замена модуля. Но с CSS-in-JSS очень раздражает, когда все приложение перезагружается, когда я меняю css.

Я обнаружил, что, несмотря на то, что опция CRA2 для конфигурации веб-пакета hot включена, горячая перезагрузка отсутствует.

Я должен сказать, что я никогда не настраивал HMR самостоятельно в веб-пакете, поэтому у меня нет четких знаний о том, как его следует использовать.

Я искал решение, но все это довольно расплывчато для меня. У меня возникли следующие вопросы:

1. В чем разница между реагирующим горячим загрузчиком и обычным HMR? Могу ли я иметь горячую замену модуля (по крайней мере для CSS) без реактивно-горячего загрузчика?

2. Можно ли как-то включить HMR без извлечения? Я видел решения для CRA1, но я использую CRA2. Также я использую craco для настройки конфигурации веб-пакета CRA2 по умолчанию, поэтому я буду рад найти решение с небольшим изменением конфигурации веб-пакета.

3. Почему HMR не включен по умолчанию в CRA2? На самом деле я всегда думал, что он включен, и по каким-то причинам просто требуется перезагрузка - мне было все равно, и у меня все было в порядке.

Answer 1

В чем разница между реактором с горячей загрузкой и обычным HMR? Могу я иметь горячую замену модуля (по крайней мере, для CSS) без реактивной погрузчик?

Горячая замена модуля (HMR) - это базовая возможность, предлагаемая Webpack. Компилятор Webpack предлагает API module.hot.accept (). Код вашего приложения может регистрировать обратные вызовы для запуска, когда определенные файлы были перекомпилированы.

react-hot-loader - это отдельная библиотека, которая использует HMR веб-пакета для сохранения состояния компонента. Если вы используете только HMR, при каждом сохранении он будет перезагружать или повторно отображать ваше приложение, поэтому все состояние вашего приложения будет потеряно. Чтобы избежать этого, вам понадобится БРЗ или react-hot-loader.

CRA2 уже имеет HMR по умолчанию, я создал его и извлек его, чтобы увидеть конфигурацию webpack. Если вам не нужно сохранять состояние вашего приложения, вы можете просто использовать HMR без установки RHL.

Ссылки:

1. Webpack HMR против React-Hot-Loader
2. Конфигурации Webpack