오늘은 오랜만에 온라인 강의로만 일정을 진행했습니다. 강의 주제가 여러 개인 만큼, 17일차 학습 내용은 여러 게시물로 나누어서 정리할 계획입니다.
첫 번째 글은 Webpack에 대한 내용을 정리했습니다.
Webpack
모듈 번들러
원래 자바스크립트는 페이지별, 혹은 기능별로 자바스크립트 파일로 분류하고 HTML파일에서 script 태그로 로드하는 형식이었습니다.
하지만 프로젝트가 커지면 커질 수록 자바스크립트 파일 각각의 의존성과 코드 사이의 실행 순서를 예측하기 힘들어지게 되었습니다.
이를 해결하기 위해 나온 것이 모듈이라는 개념입니다. ES6의 import/export 문법이 이 모듈을 지원하기 위한 것이죠.
프로젝트를 진행하면 이러한 모듈이 다수 생성되게 됩니다. 이러한 의존성이 있는 모듈 코드를 하나 또는 여러개의 파일로 만들어 주는 도구가 바로 모듈 번들러인 것입니다.
모듈 번들러는 여러 가지가 존재합니다. Parcel, rollup.js, webpack 등 다양한 번들링 도구들이 있습니다.
이 중 이번 글에서는 webpack에 대한 내용을 정리해보고자 합니다.
번들러의 기능
사실 번들러는 단순히 자바스크립트 파일들 뿐만 아니라, 애플리케이션에 필요한 모든 종류의 파일들을 모듈 단위로 나누어 최소한의 파일 묶음으로 만들어 줍니다.
뿐만 아니라 자바스크립트 파일을 외부에서 알아 보기 힘들게 난독화한다거나, 최신 문법의 자바스크립트를 모든 웹 브라우저에서 작동할 수 있게 ES5문법으로 변환(Transpile)하는 등 다양한 기능을 지원합니다.
따라서 오늘날 웹 개발에 있어서는 거의 필수적인 역할을 맡고 있다고 할 수 있습니다.
번들러 사용의 장점을 정리하면 다음과 같습니다.
- 네트워크 병목 현상 해결 - 여러 파일을 최적화 해서 하나의 파일로 묶기 때문에 주고 받는 파일의 크기를 축소
- 모듈 단위 코딩 - 유지 보수가 용이, 코드의 가독성 향상
- 다양한 서드 파티 기능 활용 가능 - Babel-loader과 같은 다양한 로더를 이용해서 모던 자바스크립트나 SASS를 활용 가능 (webpack)
Webpack 소개
webpack은 최신 모듈 포맷(CommonJS, ES6 등)을 모두 지원하며 자바스크립트 뿐만 아닌 CSS, Image 파일 등의 리소스의 의존성도 관리해줍니다.
특히, react로 개발하는 과정에서 CRA를 통해 프로젝트를 구성할 때가 있는데, 이 때 생성된 초기 프로젝트를 잘 뜯어보면 webpack 역시 자동으로 세팅되어 있는 것을 확인 할 수 있습니다.
리액트에서는 ES6 Module를 활용하는 만큼, webpack은 리액트 프로젝트에서 매우 유용하게 작용하기 때문입니다.
Webpack 사용해보기
먼저 터미널에 아래 명령어를 입력해 package.json을
$ npm init -y
$ npm i -D webpack webpack-cliwebpack은 실제 번들러 도구이고, webpack-cli는 터미널에서 webpack 관련 명령어에 접근하게 해주는 라이브러리입니다.
그리고 다음과 같은 내용으로 webpack.config.js 파일을 만들어줍니다. 해당 파일은 webpack 사용을 위한 설정 파일입니다.
// webpack.config.js
module.exports = {
entry: './src/app.js',
output: {
filename: './dist/app.bundle.js'
}
};현재 entry 부분에 app.js가 설정되어 있는데, 이는 번들링을 할 시작점으로 app.js를 활용하겠다는 뜻입니다.
webpack.config.js 작성이 끝났다면 아래와 같은 디렉토리를 만들어 볼 수 있습니다.
webpack-test
├─dist
│ └─index.html
├─src
│ └─app.js
├─package.json
└─webpack.config.js
기본 디렉토리와 설정을 끝났으니 실제로 터미널에서 webpack 명령어를 입력할 차례입니다. 하지만 그 전에, webpack으로 동작시키기 위해 package.json 파일의 "scripts" 내용을 아래와 같이 수정해야 합니다.
// package.json
"scripts": {
"dev": "webpack -d --watch", // 개발용 (development)
"prod": "webpack -p" // 제품용 (production)
}여기까지 진행했다면, 아래 명령어들로 webpack을 사용할 수 있습니다.
# 개발용
$ npm run dev
# 제품용
$ npm run prod이 과정까지 끝났다면, 프로젝트에 dist라는 폴더가 생긴 것을 확인할 수 있습니다. 해당 폴더 안을 들어가보면, app.bundle.js가 생성된 것을 볼 수 있습니다.
번들러 간단 비교
위에서 언급한 것과 같이, 번들러에는 다양한 종류가 존재합니다. 또 다양한 번들러마다 저마다의 특징과 장점이 존재합니다.
개발자 커뮤니티에서 간략하게 정리한 이미지를 통해 각 번들러들의 특징과 장점을 학습해 보았습니다.
- 많은 서드파티를 필요로 하는 복잡한 어플리케이션 => Webpack
- 최소한의 서드파티로 라이브러리를 만들 때 => rollup.js
- 복잡한 설정이 없는 비교적 간단한 어플리케이션 => Parcel
