이 글은 Webpack에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요!
Webpack이란?
Webpack이란, 오픈 소스 자바스크립트 모듈 번들러(Module Bundler)로써 여러 개로 나눠진 파일들을 하나의 자바스크립트 코드로 압축하고 최적화한다.
간단한 정의부터 알아보려고 했더니, 뜬금없이 모듈 번들러라는 녀석이 등장했다. 지금부터 모듈 번들러의 개념을 이해하고 Webpack을 파헤쳐보자!!
Module Bundler
Module
먼저 모듈(Module)이란, 특정 기능을 갖는 작은 코드 단위를 말한다. 즉, 프로그램을 구성하는 구성 요소의 일부다. 모듈은 관련 데이터와 함수들을 묶어 파일 단위로 나누는 것이 일반적이며, 모듈화 프로그래밍의 장점은 앞서 언급했다시피 특정 기능별로 파일을 나누기 때문에 유지보수가 쉽다. 아래에 예제 하나를 만들어 봤다.
'수학'이라는 자바스크립트 파일을 만들었다. 이 파일에는 '더하기'와 '빼기' 기능을 가지고 있다. 이렇게 서로 비슷한 기능이나 따로 특정한 기능들을 한 파일에 관리하게 되면, 모듈이 되는 것이다. 참고로 모듈은 자바스크립트 모듈에만 국한되지 않고, 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 대표적으로 HTML, CSS, JavaScript 파일도 모두 모듈의 개념이다. 이밖에도 이미지나 폰트들도 모듈이 될 수 있다.
Bundler
번들러(Bundler)란, 지정한 단위로 파일들을 하나로 만들고 요청을 받았을 때, 응답할 수 있는 환경을 만드는 역할을 한다. 번들러가 있다면, 소스 코드를 모듈별로 작성할 수 있으며, 모듈과 모듈 사이 또는 외부 라이브러리의 의존성도 쉽게 관리할 수 있다.
🤔의존성 관리?
의존성 관리란, 프로젝트에서 외부의 어떤 라이브러리를 사용하고 있는지를 별도로 관리하는 것을 말한다.
그래서 Webpack이 뭐고, Module Bundler가 하는 일이 정확히 뭔데?
위에서 배운 개념을 하나하나씩 되새기며, Webpack의 개념과 모듈 번들러의 역할을 다시 정리해보자. Webpack은 모듈 번들러다. 모듈 번들러란, 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript 등)을 각각의 모듈로 하고, 병합하여 하나의 결과물을 만드는 도구를 말한다.
이미지 왼쪽을 보자. 자바스크립트, CSS, 이미지 파일 등 이 전부를 자바스크립트 모듈로 로딩하여 사용하며, 이 모듈이 웹 애플리케이션을 구성하는 요소가 되는 것이다. 그리고 이렇게 몇십, 몇백 개가 되는 자원(구성요소)들을 오른쪽 그림처럼 하나의 파일로 병합하고 압축하는 일을 모듈 번들러가 한다. 추가로 모듈 번들러의 장점도 정리해봤다.
Module bundler의 장점
1. 여러 파일의 자바스크립트 코드를 최적화하여, 네트워크 비용을 절감할 수 있다.
2. 모듈 단위로 개발이 가능하고, 유지보수가 쉽다.
3. 최신 자바스크립트 문법이 호환되지 않는 하위 브라우저에서도 사용할 수 있게 코드를 변환시켜준다.
Webpack의 구성요소와 역할
Webpack은 Entry, Output, Loaders, Plugins, Mode로 구성되어 있다. 지금부터 각각의 역할을 알아보자.
Entry
Entry는 웹팩이 빌드할 파일의 시작 위치를 말한다. 아래 그림을 보자.
중복된 내용이지만 바로 전에, Webpack은 자바스크립트, CSS 등 모든 것을 자바스크립트 모듈로 로딩하여 사용한다고 했다. 이미지 왼쪽처럼 모듈이 점점 많아지면, 의존성이 증가하게 되는데, 이 의존성 그래프의 시작점을 Entry라고 이해하면 된다. Webpack은 이렇게 Entry를 통하여 필요한 모듈을 로딩하고, 하나의 파일로 묶는 것이다.
Entry의 기본 설정
Entry에 들어가는 내용
Entry 속성에 지정된 파일엔 웹 애플리케이션의 전반적인 구조와 내용이 담겨야 한다. 그 이유는 Webpack이 해당 파일을 통해 웹 애플리케이션에서 사용되는 모듈과 모듈 간의 관계를 이해하고 분석하기 때문에, 동작시킬 수 있는 내용이 반드시 담겨야 한다.
Output
Webpack은 Entry에서 설정한 자바스크립트 파일을 시작으로 의존된 모든 모듈을 하나로 묶는다. Output은 이렇게 Webpack에 의해 생성된 번들을 내보낼 위치와 파일의 이름을 지정하는 역할을 한다.
Output의 기본 설정
Output의 옵션 형태
Entry와 다르게 Output에는 객체 형태로 옵션들을 추가해야 한다.(기본 설정 코드를 같이 참고해보자!) 먼저 최소한 filename은 지정해줘야 하고, 일반적으로 path를 함께 정의해준다. filename은 Webpack으로 빌드한 파일의 이름을 의미하고, path는 해당 파일의 경로를 말한다. path안에 사용된 path.resolve() 메소드는 인자로 받은 경로들을 조합해, 유효한 경로로 만들어 주는 Node.js API가 되겠다.
Loader
Loader의 역할은 Webpack이 웹 애플리케이션을 해석할 때, 자바스크립트 파일이 아닌 다른 파일들도 유효한 모듈로 변하게 해 준다. 이를테면 HTML, CSS, 이미지, 폰트 등이 그렇다.
Loader의 기본 설정
Loader의 기본 설정은 위의 이미지와 같다. 코드를 잠시 살펴보면, module 객체 안에 rules라는 배열이 추가되어있는 것을 확인할 수 있는데, 이 배열 안에는 test와 use라는 속성을 추가할 수 있다. 이 두 속성의 역할은 다음과 같다.
test : 변환해야 하는 파일 또는 파일들을 식별하는 역할을 한다. 일반적으로 정규표현식을 사용하여 작성한다.
use : 변환해야 하는 파일에 대해 어떤 Loader를 적용할지 설정해준다.(예를 들어 CSS파일을 변환해야 한다면, 'css-loader' 이런 식으로 Loader가 적용된다.)
아래에 Loader를 적용한 예제 코드를 첨부할 테니 꼭 참고해보자!!
Plugin
좀 전에 Loader는 자바스크립트 파일이 아닌 것들을 파일 단위로 모듈로 변하게 한다고 했다면, Plugin은 번들된 결과물들을 처리하는 역할을 한다. 즉, Webpack의 기본적인 동작에서 추가적인 기능을 제공한다는 의미다. 그리고 번들된 자바스크립트를 난독화 하거나, 특정 텍스트를 추출하는 용도로 사용이 가능하다.
Plugin의 기본 설정
Plugin 배열엔 생성자 함수로 생성한 객체 인스턴스만 추가할 수 있다. 아래의 예제도 꼭 확인해주자!!
Mode
Webpack을 세팅할 때, Mode라는 속성이 있다. 이 속성은 Webpack 버전 4부터 지원하는 속성인데, 이것을 사용하게 되면 Webpack의 실행 모드를 설정할 수 있다. 실행 모드는 3가지가 있다.
none : 실행 모드를 설정하지 않음.
development : 개발 모드. 이 모드의 경우 개발자들이 좀 더 보기 편하도록 Webpack의 로그나 결과물을 참조할 수 있다.
production : 배포 모드. 성능 최적화를 위해 기본적인 파일 압축과정이 추가된다. 모드의 기본 값을 설정하지 않았을 때 자동으로 이 모드로 설정됨.
Mode의 적용 예시
정리
Webpack이란?
Webpack이란, 오픈 소스 자바스크립트 모듈 번들러(Module Bundler)다. 모듈 번들러란, 웹 애플리케이션을 구성하는 자원 모두를 각각의 모듈로 보고 이것을 조합해서 병합된 하나의 결과물을 만드는 도구를 말한다.
Module이란?
모듈이란, 프로그램을 구성하는 구성 요소의 일부다. 모듈은 관련된 데이터와 함수들이 묶여 모듈을 형성하고 파일 단위로 나뉘는 것이 일반적이며, 모듈화 프로그래밍은 기능별로 파일을 나눠가며 프로그래밍하기 때문에 유지보수가 용이하다는 장점을 가진다.
Bundler란?
번들러란, 지정한 단위로 파일들을 하나로 만들고 요청을 받았을 때, 응답할 수 있는 환경을 만드는 역할을 하고, 소스 코드를 모듈별로 작성할 수 있다. 또한, 모듈 간 또는 외부 라이브러리의 의존성도 쉽게 관리할 수 있다.
Webpack의 주요 속성
Entry는 Webpack을 실행할 대상 파일이자 시작점이다.
Output은 Webpack의 결과물에 대한 정보를 입력하는 속성이다.
Loader는 자바스크립트 파일이 아닌 파일들도 Webpack이 처리할 수 있도록 해준다.
Plugin은 Webpack에서 변환된 파일에 추가적인 기능을 더해준다.
Mode는 Webpack의 실행 모드를 설정할 수 있으며, 3가지 실행 모드가 있다. 버전 4부터 지원하는 속성이다.
Webpack 적용 시나리오
1. Entry로 설정된 시작점에서 의존성을 가진 모든 파일을 압축하여 Output이 지정한 곳에 자바스크립트 파일을 만든다.
2. 자바스크립트 파일이 아니라면, Loader를 적용하여 이용가능한 모듈로 변환한다.
3. 기능을 추가하거나 번들된 파일을 난독화 혹은 텍스트를 추출하고자 할 때, Plugin을 이용한다.
4. 사용 목적에 따라 Mode를 적용하여 실행 모드를 설정한다.
'ivory's DevLog' 카테고리의 다른 글
| [React] - React Router (0) | 2020.11.22 |
|---|---|
| Git 폭파범이 정리한 Git에 관한 기본 개념 (0) | 2020.11.04 |
| Babel (0) | 2020.10.18 |
| [JavaScript] - this (0) | 2020.10.04 |
| CORS란? (2) | 2020.10.02 |