- 프론트엔드 변경점을 감지하여 자동으로 빌드하고 변경점을 바꿔줌
- webpack.config.js를 읽어서 빌드를 해주고 서버로 유지시켜줌
webpack-cli 4.x.x 일 때,
npm i -D react-refresh @pmmmwh/react-refresh-webpack-plugin
npm i -D webpack-dev-server
package.json
"scripts": {
"dev": "webpack serve --env development"
}
webpack.config.js
- module > rules > babel-loader > options > plugins > 'react-refresh/babel' 추가
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
// module > rules > babel-loader > options > plugins > 'react-refresh/babel' 추가
plugins: [
new RefreshWebpackPlugin(),
]
devServer: {
publicPath: '/dist/' // 파일들이 위치할 서버상의 경로(webpack-dev-server의 상대 경로)
hot: true,
}
index.html
<script src="./dist/app.js"></script>
// devServer > publicPath: '/dist/'로 미선언시 src="./app.js"
webpack-cli 3.x.x 일 때,
npm i -D react-hot-loader
npm i -D webpack-dev-server
package.json
"scripts": {
"dev": "webpack-dev-server --hot"
}
client.jsx
const { hot } = require('react-hot-loader/root');
webpack.config.js
- module > rules > babel-loader > options > plugins > 'react-hot-loader/babel' 추가
index.html
<script src="./app.js"></script>
// devServer > publicPath: '/dist/'로 선언시 src="./dist/app.js"
'프로그래밍 > React' 카테고리의 다른 글
[React] Editor 선정하기 (0) | 2021.08.22 |
---|---|
[React] Webpack CSS 설정 추가하기 (0) | 2020.12.20 |
[React] immutable Failed to compile (0) | 2020.11.18 |
[React] 기초 정리 (0) | 2020.02.22 |
[React] 강좌 정리 및 초반 설정 (0) | 2019.11.02 |
댓글