웹팩 정리

1. 웹팩이란

웹팩은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러이다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다. 웹팩이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다.

 

 

2. 웹팩을 쓰면 뭐가 좋을까?

2-1) 모듈 관리

웹팩을 쓰면 모듈 관리가 쉽다.

// math1.js
var num = 10;
function printNum() {
  console.log(num);
}

// math2.js
var num = 20;
function printNum() {
  console.log(num);
}

<!-- index.html -->
<script src="./math1.js"></script>
<script src="./math2.js"></script>
<script>
  printNum(); // 20
</script>
</body>

위처럼 2개의 스크립트를 로딩해서 사용하면 20을 출력한다. 위의 문제를 해결하기 위해서 Common.js, AMD와 같은 라이브러리를 사용했었는데, 웹팩을 사용하면 모듈화를 통해 이런 문제를 쉽게 해결할 수 있다.

 

2-2) 애플리케이션의 로딩 속도와 성능 향상

 

웹팩을 이용하면 위처럼 여러개의 리소스를 여러번 다운로드 하지않고 번들링 된 파일을 조회함으로써 요청수를 줄일 수 있다. 번들링은 브라우저가 새 요청을 시작하는 동안 앱이 기다려야 하는 횟수를 최소화하므로 HTTP/1.1 클라이언트에 특히 강력하다. HTTP/2의 경우, 코드 스플리팅을 사용하여 좋은 결과를 얻을 수도 있다.

아래는 브라우저별 최대 HTTP 요청 개수인데 번들링을 사용하면 이런 제약을 피할 수 있다.

 

2. 웹팩 핵심개념

 

2-1) Entry(엔트리)

웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이다. 엔트리 포인트는 웹팩이 내부의 디펜던시 그래프를를 생성하기 위해 사용해야 하는 모듈이다. 웹팩은 엔트리 포인트가 (직간접적으로) 의존하는 다른 모듈과 라이브러리를 찾아낸다. 기본값은 ./src/index.js이지만, webpack 설정에서 entry 속성을 설정하여 다른 (또는 여러 엔트리 포인트)를 지정할 수 있다.

 

2-2) Output(출력)

output은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 웹팩에 알려주는 역할을 한다. 기본 출력 파일의 경우에는 ./dist/main.js로 , 생성된 기타 파일의 경우에는 ./dist 폴더로 설정된다.
다음과 같이 설정에서 output 필드를 지정할 수 있다.

 

filename 속성에 여러 가지 옵션을 넣을 수 있다.

// 결과 파일 이름에 entry 속성을 포함하는 옵션
module.exports = {
  output: {
    filename: '[name].bundle.js'
  }
};

// 결과 파일 이름에 웹팩 내부적으로 사용하는 모듈 ID를 포함하는 옵션
module.exports = {
  output: {
    filename: '[id].bundle.js'
  }
};

// 매 빌드시 마다 고유 해시 값을 붙이는 옵션
module.exports = {
  output: {
    filename: '[name].[hash].bundle.js'
  }
};

// 웹팩의 각 모듈 내용을 기준으로 생생된 해시 값을 붙이는 옵션
module.exports = {
  output: {
    filename: '[chunkhash].bundle.js'
  }
};

 

 

2-3) Loaders(로더)

웹팩은 기본적으로 JavaScript와 JSON 파일만 이해한다. 로더를 사용하면 웹팩이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환 하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가할 수 있다.

예를들어 js파일과 css파일이 따로 있는걸 하나로 합칠 수 있다.

 

 

2-4) Plugins(플러그인)

로더는 특정 유형의 모듈을 변환하는 데 사용한다면 플러그인은 번들된 결과물을 처리한다. 예를들어 번들을 최적화 하거나 애셋을 관리, 환경 변수 주입 등과 같은 광범위한 작업을 수행한다.

아래와 같이 사용한다.

아래는 자주 사용되는 플러그인들이다.
- split-chunks-plugin
- clean-webpack-plugin
- image-webpack-loader
- webpack-bundle-analyzer-plugin

 

 

참고

- https://webpack.kr/concepts/

- https://joshua1988.github.io/webpack-guide/

- https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html

- https://github.com/webpack/webpack/tree/main/examples/http2-aggressive-splitting

- https://medium.com/webpack/webpack-http-2-7083ec3f3ce6