[React] Webpack 자동 빌드

- 프론트엔드 변경점을 감지하여 자동으로 빌드하고 변경점을 바꿔줌
- 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"