React Refresh

Apr 23, 2026 updated Apr 23, 2026 components css react webpack

이 챕터에서는 리액트 리프레쉬 플러그인 적용합니다.

Terminal

npm install @pmmmwh/react-refresh-webpack-plugin react-refresh -D

@pmmmwh/react-refresh-webpack-plugin

React components를 위한 Fast Refresh 웹팩 플러그인

react-refresh

Fast Refresh를 번들로 통합하는데 필요한 패키.

플러그인의 자세한 설명은https://github.com/pmmmwh/react-refresh-webpack-plugin을 참고해주세요.

WEBPACK

// webpack.dev.js const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); module.exports = { mode: 'development', devtool: 'cheap-module-source-map', devServer: { hot: true, open: true, }, module: { rules: [ { test: /.(s[ac]|c)ss$/, use: [ 'style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader', 'postcss-loader', ], }, ], }, plugins: [new ReactRefreshWebpackPlugin()], };