Bundling / Webpack Basic concepts

번들링의 필요성

- 개발을 하다보면, 아래의 왼쪽과 같이 다양한 형태의 파일들이 생성된다.

페이지를 로딩할 때, 많은 파일들이 다운로드되며, 이는 고스란히 서버 측의 네트워크 코스트가 된다. 

또한, 서버와의 접촉이 많을수록 애플리케이션이 느리게 로딩되어 사용자 경험도 저하된다.

 

개발자의 입장에서는 서로 다른 패키지들에서 같은 이름의 변수나 함수를 사용해 충돌하는 일이 벌어질수 있다는 위험성도 존재한다.

 

이때, 의존성을 가지는 여러 파일을 묶어주는 번들러를 통해 파일들을 번들링해 제공한다면 (위 사진의 오른쪽!) 위와 같은 문제들을 해결할 수 있다. 

 

예시로, 브라우저 네트워크 탭에서 여러개의 html, js 파일을 다운로드하여 화면을 렌더링한다는것을 볼 수 있다. (번들링 전)

 

번들링 후에는 이렇게 번들링된 하나의 js 파일만을 다운로드하게 된다. 

 

이처럼 UX/네트워크 성능을 저하시키는 복잡성을 개선해야한다는 필요성으로 인해, 번들링을 도와주는 다양한 번들러들이 등장하게 되었다. 

 

Webpack 

그 중 가장 대표적으로 쓰이는 번들러가 웹팩이다. (공식 문서 한글 번역본도 존재함!)

 

웹팩은 하나의 JavaScript 파일에 CSS파일이나 이미지 파일 모듈 등을 모두 몰아넣을 수 있다. 

npm install -D webpack webpack-cli

해당 명령어로 웹팩을 설치하면, package.json 파일의 Dependencies 에 webpack이 생긴다. 

 

(더 편리하게 이용하려면 script 에 "build": webpack 을 추가하여, npm run build로 번들링해주면 된다.)

 

위와 같이 웹팩은 번들링 해줄 파일들을 넣어주고 (input) 번들링을 거쳐 번들링 된 후의 파일(output)으로 나오는 과정을 편리하게 해준다. 이 과정에서 다양한 옵션들을 선택해줄 수 있다. 

 

webpack.config.js

 

webpack 명령어를 입력하면, 위와 같은 webpack.config.js 파일의 설정들에 따라 번들링이 이루어진다. 

 

이때, entry, output, loader, plugin 등이 무엇인지 webpack의 기본 개념을 살펴보자!

 

 

Webpack의 기본 개념

 

internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles (which are static assets to serve your content form).

웹팩은 entry point로부터 시작해 의존성이 있는 모듈들을 dependency graph로 빌드하는 과정을 통해 번들링 기능을 제공한다. 

 

Entry

which module webpack should use to begin building out its dependency graph.

dependency graph를 시작하는 모듈, 즉 가장 상위에 있는 모듈을 이야기한다. 

디폴트 값은 ./src/index.js 이다. 

 

위의 webpack.config.js 파일에서 entry 프로퍼티에 해당 파일의 경로를 설정해주면 된다. 

 

Output

tells webpack where to emit the bundles it creates and how to name these files.

번들링한 파일을 어디에 위치시켜줄지 + 그 파일 이름을 무엇으로 지정해줄지를 정해주는 프로퍼티이다.

config의 path, filename으로 설정한다. (여기서 path는 Node.js에서 파일 경로를 조작하기 위해 지원하는 모듈로, const path = require('path')로 파일 상단에서 불러온다)

 

Loader

webpack only understands JavaScript and JSON files! Loaders allow webpack to process other type of files and convert them into valid modules. 

로더는 웹팩에서 가장 중요한 개념! 웹팩에서는 자바스크립트와 JSON 파일만 읽을 수 있기 때문에, 다양한 로더들을 통해 다른 형식의 파일을 변환해주어야 한다.  -> https://webpack.js.org/loaders/ (다양한 로더들의 목록!)

 

config 파일에서 test, use 프로퍼티를 설정해주면 된다.

• test: 변환시키고자 하는 파일 확장자
• use: 변환을 위해 어떠한 로더를 사용할지 배열에 담아주는 곳

이 프로퍼티들은 modules.rules에 위치시켜주어야 한다. 또한, use의 배열에서 뒤에 있는 로더 먼저 실행된다는 점도 주의하여 작성할 것!

 

Plugin 

to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

번들 최적화, 에셋 관리 또는 환경변수 주입 등의 다른 기능들을 수행하고 싶을 때에는 플러그인을 이용할 수 있다. 

해당 플러그인을 설치한 후, 인스턴스로 만들어 사용한다. 

 

Mode 

by setting the mode parameter to either development, production(default) or none, you can enable webpack's built-in optimizations that correspond to each environment. 

production, development 모드를 설정하여 이에 맞추어 최적화를 해준다.

 

 

참고자료

https://webpack.js.org/concepts/

Concepts | webpack

https://webpack.js.org/guides/getting-started/#using-a-configuration

Getting Started | webpack

https://www.youtube.com/watch?v=dt2xU71pX88&list=PLuHgQVnccGMChcT9IKopFDoAIoTA-03DA&index=7