Webpack의 개념
1. 모듈 단위 개발의 이점
- 프로젝트의 전체 소스코드를 하나의 파일에 몰아넣는 게 아니라 공통점이 있는 부분끼리 나누어 여러 개의 파일에 각각 따로 저장해 개발을 진행하는 것을 ‘모듈 단위로 개발한다’고 한다. 하나의 소스파일에 들어있는 코드끼리는 서로 공통점이 있으므로 코드의 가독성을 높일 수 있어 향후 기능별로 유지보수를 하는 데 유리하다.
2. 자바스크립트에서의 모듈 단위 개발
- 자바스크립트에서도 기본적으로 <script> 태그를 이용하여 한 페이지에서 수개의 서로 다른 .js 파일을 로드할 수 있다. 그러나 이런 식으로 .js 파일을 여러 개 로드하는 경우 다음 문제가 발생할 수 있다.
1) 로드하는 .js 파일의 순서에 의존
<script src="a.js"></script>
<script src="b.js"></script>
- 위 코드와 같은 순서로 .js 파일을 로드한다면, 브라우저는 먼저 a.js 파일의 코드를 모두 다 실행한 그 다음에 비로소 b.js 파일의 코드를 실행한다. 이렇게 되면, 만약 a.js 파일에서 b.js 파일에 쓰인 함수나 변수를 호출하고 있다면 에러가 발생하게 된다.
2) 변수 스코프 문제
- 위 코드를 예로 들어, a.js 파일에서 전역 스코프로 선언된 변수 또는 함수와 이름이 같은 b.js 파일 내 변수 또는 함수가 있을 수 있다. 이때 만약 각 .js파일 내에서 서로 다른 기능으로 구현돼 있다 하더라도, 이들 변수 또는 함수는 같은 변수로 취급되어 에러가 발생할 수 있다.
- 자바스크립트는 ES5에서부터 이러한 단점을 극복할 수 있는 import, export 예약어를 지원하게 되었다. 간단히 설명하면, .js 파일을 로드하는 페이지에서는 단 하나의 .js 파일만 로드하면 되며, 이때 로드되는 .js 파일에서는 다른 .js 파일들을 import 예약어를 통해 프로젝트에 포함시킬 수 있다. (이때 import로 지정된 함수 또는 변수만이 import 예약어를 사용한 .js 파일에서 직접 호출할 수 있게 된다. 또, 이처럼 import로 지정할 수 있는 함수 또는 변수는 import 될 .js 파일 내에서 export 예약어를 통해 지정할 수 있다.)
3. webpack이란?
webpack은 자바스크립트에서 널리 쓰이는, 수개의 모듈 파일을 하나의 파일로 묶어주는 ‘모듈 번들러’ 라이브러리의 하나다. 많은 웹브라우저들이 별도의 번들러 없이도 자체적으로 import, export 예약어를 지원하지만, webpack 같은 모듈 번들러로 프로젝트를 빌드해 사용하면 여러 이점이 있다.
1) 코드를 압축/최적화할 수 있다.
- webpack은 수개의 파일 사이에 종속성을 파악하여 프로젝트에서 쓰이지 않은 파일을 제외하고 하나의 파일로 만들어준다. 또, 설정 방식에 따라 추가적인 압축/최적화가 지원된다.
2) css의 확장 언어인 less, scss를 사용할 수 있다.
- less, scss를 사용하면 기존 css에 비해 웹페이지 디자인 요소를 훨씬 더 효율적으로 다룰 수 있다. webpack을 사용하면 이러한 언어를 사용해 개발할 수 있다.
3) ES6 이상의 자바스크립트를 ES5로 변환할 수 있다.
- 과거 웹브라우저는 ES6를 지원하지 않는 경우가 있는데, webpack을 사용하면 이들 브라우저에서도 사용할 수 있게 코드를 변환시켜주어 더 다양한 환경에서 웹페이지를 사용할 수 있게 한다.
4. webpack으로 번들링하기
- 흔히 webpack, webpack-cli, webpack-dev-server 세 개의 패키지를 사용하므로 이 세 패키지를 설치할 필요가 있다.
- development 모드로 번들링을 하는 스크립트인 webpack --mode development와 production 모드로 번들링을 하는 스크립트인 webpack --mode production 이 있다. (특히 production 모드로 번들링하는 스크립트는 흔히 build라는 단축어로서 scripts 속성에 정의되어 쓰이곤 한다.)
- 번들링의 결과 파일이 들어있는 폴더의 위치는 webpack.config.js 파일 내 module.exports 변수의 output 속성에 정의돼 있다. (보통 package.json이 있는 폴더의 dist 폴더 내에 저장된다.)