Webpack dev Server, hot reloading

웹팩 이용시, 코드 수정이 있을 때마다 웹팩을 실행하여 리로딩을 해줘야 했었다. 하지만 dev server와 hot reloading을 이용하면 따로 웹팩을 실행하지 않아도 자동적으로 적용되어 화면에 나타나게 된다.

설치

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

npm i -D webpack-dev-server

설정

"name": "webpack-example",
"version": "0.1.0",
"private": true,
"scripts": {
    "dev": "webpack serve --env development" // 추가
  },
  
  ...

package.json에 scripts에 명령어를 추가시켜준다.
(패치 전에는 webpack-dev-server --hot 이었다.)

const path = require('path')
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
// 모듈을 불러온다. 변수명은 아무렇게나 생성해도 상관없다.

module.exports ={
  mode: 'development',
  devtool: 'eval', 
  resolve: {
  	extensions: ['.js','.jsx','.css']
  },
  
  entry: {
    app: ['./client','./example'] 
  },
  
  module: {
  	rules: [{
    	test: /\.jsx?/, 
      	loader: 'babel-loader', 
      	options: { 
          presets: [
          	'@babel/preset-env', '@babel/preset-react'
          ],
         plugins: [
         	'react-refresh/babel'
           	// babel loader plugins에 추가해준다.
           	// 패치 전에는 'react-refresh/babel' 이었다.
         ],
        },
    }]
    
  },
  plugins: [
  	new RefreshWebpackPlugin(); //불러온 모듈을 plugins에 넣어준다.
  ], 
  
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.js',
    publicPath: '/dist/, // publicPath 추가
  },
  deveServer: {
  	devMiddleware : { publicPath: '/dist/ },
    // 웹팩이 생성하는 파일의 경로를 나타낸다.
    static: { directory: path.resolve(__dirname) },
  	// 정적파일 (HTML)의 위치를 알려줘야한다.
  	// 만약 최상위 폴더가 아닌 scr폴더에 있다면
  	// directory: path.resolve(__dirname, 'scr') 로 나타낼 수 있다.
  	// 패치 후 static 설정이 추가되었다.
	hot: true
  },
}

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

출처:
https://www.youtube.com/watch?v=RCb0UF7Lu90&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=19