개발공부/모듈 번들링

핫 리로딩 기능을 위해 react hot loader와 webpack dev-server의 hot옵션 둘다 사용해야할까

Grapefruitgreentealoe 2022. 5. 20. 21:07
반응형

https://www.npmjs.com/package/react-hot-loader

 

react-hot-loader

Tweak React components in real time.. Latest version: 4.13.0, last published: 2 years ago. Start using react-hot-loader in your project by running `npm i react-hot-loader`. There are 2717 other projects in the npm registry using react-hot-loader.

www.npmjs.com

react-hot-loader npm 사이트에 들어가면, 아래 4개를 사용중이라면, react hot loader를 사용하지말고 사용중인 번들러에 맞는 플러그인을 쓰거나 하면 된다. 웹팩은 플러그인을 다운받고, hot옵션을 주면 된다.

 

 

https://github.com/pmmmwh/react-refresh-webpack-plugin/

 

GitHub - pmmmwh/react-refresh-webpack-plugin: A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading)

A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components. - GitHub - pmmmwh/react-refresh-webpack-plugin: A Webpack plugin to enable "F...

github.com

Tip

Since webpack-dev-server v4, HMR is enabled by default. It automatically applies [webpack.HotModuleReplacementPlugin](<https://webpack.js.org/plugins/hot-module-replacement-plugin/>) which is required to enable HMR. So you don't have to add this plugin to your webpack.config.js when hot is set to true in config or via the CLI option --hot. See the HMR concepts page for more information.

 

++ 웹팩에서는 기본 옵션이어서 플러그인 설치하지 않아도 된다!

반응형