Webpack

 

 

Concept

.js, .css, .sass, .png 등 각종 리소스를 하나의 파일로 번들링하는 도구.

 

Why to use?

1. Resolve cross-browser issue
2. Reduce amount of network load by integrating all files to bundling one.

HTTP 1.1 까지는 한 번에 하나의 파일만 요청 - 응답하여 받기 때문에

웹 페이지의 구성파일이 총 100개라고 치면 100번 요청해야한다.

얼마나 비효율적인가?

 

Configure

webpack.config.js || webpack.config.ts

Node.js + Typescript 기반의 프로젝트라면 다음과 같이 설정해볼 수 있다.
모르겠으면 그냥 복붙하자.

 

 

 

공식 문서를 참조한 주석을 상세히 달아놨으니 응용해볼 수 있을 것이다.

 

.ts 로 할 경우 다음과 같은 dependency 설정이 필요하다.

npm 패키지 매니저를 써도 무방하다.

 

 

Output

build 결과는 어떻게 나올까?

 

 

🔗 Reference

Introduction To Webpack with Node.js

 

Concepts | webpack