230228 - Webpack (웹팩) - hot reloading

오늘 내가 배운 것

1. hot reloading

 

1. hot reloading

Webpack을 사용할 때, 번들링 하기 전 원본 파일의 내용을 수정하게 되면 다시 번들링을 해서 bundle.js를 생성했어야 했다.
근데, 이 과정이 번거롭기 때문에 Webpack에서 hot reloading이라는 기능을 추가했다.
이를 이용하여 개발자가 코드를 변경하면 브라우저에서 즉시 변경 내용이 반영이 되어서 적용 상태를 볼 수 있다.

 

1. 관련 패키지 설치

$ npm install webpack-dev-server

 

 

2. webpack.config.js 수정

devServer 속성을 통해 설정을 할 수 있다.

//추가
 devServer: {
        static: {
            directory: path.join(__dirname, "dist"),
        },
        compress: true,
        port: 3000,
        hot: true,
        historyApiFallback: true,
    },

추적하는 폴더와, 포트를 설정할 수 있다.

 

 

3. 사용하기

$ npx webpack serve --open --hot

 

 

4.  간단하게 사용하기

위에 명령어가 길어서 불편하기 때문에 package.json에 설정을 함으로써 같은 명령어를 편하게 쓸 수 있다.

    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"

      //추가하기
      "start" : "webpack serve --open --hot"
    },

설정을 한 뒤에

 

$ npm start

 명령어를 이용해서 3번과 같은 결과를 얻을 수 있다.

 

 

 

---