웹팩 데브 서버와 핫 리로딩

1. 웹팩 데브 서버와 핫 리로딩 설정 왜 해주는 건데?

react로 개발을 하다가 수정을 할 때 변경 사항을 확인하기 위해 계속 빌드를 반복해야한다.

개발자한테 이 반복작업은 매우 귀찮으며, 시간이 걸리는 작업이다.

 

하지만, 빌드 작업과 테스트를 위한 클릭 및 입력 작업이 생략될 수 있다면?획기적인 시간 단축을 기대할 수 있을 것이다.

 

우린 이것을 웹팩 데브 서버를 설치하고, 핫 리로딩 설정을 해줌으로써 빌드 과정을 자동화한다.

 

 

2. 핫 리로딩하는 2개의 패키지

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

 

 

그런데 이 핫 리로딩 패키지 없어도 리액트에서 그냥 리로딩되는데? 구지해줘야하나?

그것은 그냥 리로딩이다. 핫리로딩이랑은 다르다.

리로딩은 새로고침이다. webpack-devServer가 변경점을 탐지하면 새로고침을 원래 시켜준다.

그런데 새로고침이 되면 기존 데이터가 다 날아가버린다는 단점이 있다. 새로 화면을 띄우는 것이다.

 

핫리로딩은 기존 데이터 유지하면서 화면을 바꿔주는 것이다.

기존 데이터를 유지하냐, 안하냐의 엄청난 차이인 것이다.

 

 

3. 개발용 서버 설치

npm i -D webpack-dev-server

 

 

4. 빌드 명령어 변경

package.json에서 빌드 명령어를 커스텀했다면 다음과 같이 변경한다.

react-refresh 문법같다.

"scripts":{
	"dev": "webpack serve --env development"
}

 

 

기존에는 webpack-dev-server --hot이었는데,

webpack-cli가 4버전이 되면서 위와 같이 변경되었다.

 

 

5. webpack.config.json에 plugin 추가

설치했던 pmmmwh/react-refresh-webpack-plugin 모듈을 추가한다. 그럼 빌드할 때마다 실행된다.

또한 babel-loader의 plugins를 추가한다. (react-refresh/babel)

그럼 바벨이 최신문법을 과거문법으로 바꿔줄 때 핫 리로딩까지 적용해준다.

const path = require('path');
const RefreshWebpackPlugin = require('pmmmwh/react-refresh-webpack-plugin'); //추가

module.exports = {
	name: 'wordrelay-setting', //이 이름으로 관리하겠다.
    mode: 'development', //실서비스용으로 바꾸려면 'production'으로 변경
    devtool: 'eval', //빠르게라는 의미(개발), production일 때는 'hidden-source-map' 
    resolve:{ //확장자
    	extensions: ['.js', '.jsx']
    },
    
   	entry: { //입력
    	app: ['./client', './WordRelay'],
    },
    module: {
    	rules:[{
        	test: /\.jsx?/, //정규표현식, js나 jsx로 설정된 파일 모두
            loader: 'babel-loader', //babel-loader 규칙에 따른다.
            options:{
            	presets: ['@babel/preset-env', '@babel/preset-react'],
                plugin: ['@babel/plugin-proposal-calss-properties',
                'react-refresh-babel'],
            }
        }]
    },
    
plugins:[
	new RefreshWebpackPlugin() //추가
],
    output: { //출력
    	path: path.join(__dirname, 'dist'), //__dirname == 현재폴더
        filename: 'app.js',
        publicPath: '/dist/',
    },
};


//즉, client.jsx와 WordRelay.jsx를 합쳐서 app.js로 만들어준다.

 

 

 

6. 개발 서버 추가

프론트엔드 개발 편의를 위해 잠깐 두는 서버이다.

위와 동일하게 webpack.config.json 파일 맨 아래에 추가해주면 된다.

devServer: {
	publicPath: '/dist/',
	hot: true,
}

 

빌드로 결과물을 실행한 다음에 /dist/ 폴더에 메모리로 저장한다.

index.html을 실행하면 저장한 결과물을 제공해주는 것이다.

 

핫리로딩 기능까지 더해져서 dist의 결과물과 비교하여 변경된 점만 수정해준다.

즉, 수정사항이 실시간으로 반영된다.

 

 

7.  react-refresh-webpack-plugin 0.5 버전

react-refresh-webpack-plugin이 0.5버전 이상이 되면서 2개 옵션을 추가해야한다.

devServer: {
	devMiddleware: {
    	publicPath: '/dist/',
    },
    static: {directory: path.resolve(__dirname),'src'},
	hot: true,
}

 

static : 실제로 존재하는 정적 파일들의 경로 (ex. index.html)

만약 index.html이 다른 폴더 안에 들어가 있다면 뒤에 폴더 경로를 써주면 된다. (ex. src)

최상위 폴더에 있을 경우 아무것도 써주지 않아도 된다.

 

devServer: 나중에 웹팩이 결과물을 생성해주는 경로

예를 들어 웹팩 명령어를 실행 후 결과를 dist 폴더 안에다가 메모리로 저장한다.