Webpack이란 무엇인가?

 

오늘은 웹팩이 무엇인지에 대해서 알아보고 기본적인 사용법을 확인해 보려고 한다.

자바스크립트를 사용한 웹 서비스 어플리케이션의 복잡도가 증가하면서 자바스크립트 코드의 양이 많아지고, 이러한 코드를 유지 보수하기 쉽게 만들려고 모듈로 관리하는 방법이 필요하게 되었다.

자바스크립트에서는 ES2015 이전에 모듈을 사용하기 위해서 여러가지 명세가 존재했다. 대표적으로 AMD, CommonJS 등이 있다. 그러다가 ES2015에서 자바스크립트는 표준 모듈 시스템을 제안했다. 우리가 잘 아는 export/import 방식으로 말이다.

안타까운 사실은 모든 브라우저가 이러한 ES2015방식의 모듈 시스템을 지원하지는 않는다는 점이다.(특히 IE가 그렇다) 크롬의 경우 버전 61부터 모듈 시스템을 지원한다. 그래서 개발자들은 브라우저와 버전에 상관없이 이러한 편리한 모듈 시스템을 사용하기를 원했고, 이러한 필요에 의해 나온 툴이 웹팩(webpack)이다.

 

웹팩은 여러 파일을 하나로 합쳐주는 자바스크립트 번들러이다. 하나의 entry point에서 시작하여 의존하는 모듈을 찾아내고, 결과적으로 하나의 결과물을 만들어 낸다. 웹팩은 모듈 시스템을 구성하는 기능 이외에도 컴파일 속도를 빠르게 해준다거나, 로더를 사용할 수 있다는 등의 장점을 가지고 있다.

번들 작업은 webpack 패키지와 웹팩 터미널 도구인 webpack-cli를 통해 수행한다. 웹팩에서 가장 기본적인 옵션 세개를 알아보자.

• mode : 웹팩 실행 모드로 개발 버전의 경우 development, 상용 버전의 경우 production 등으로 사용.
• entry : 시작점 경로를 지정하는 옵션.
• output : 번들링 된 결과물을 위치할 경로

이러한 설정들은 보통 webpack.config.js 파일에서 하나의 설정파일로 관리를 한다.

위의 설정 파일을 해석해 보면, 개발 버전으로 src/app.js가 entry point이며, main.js(entry에서 이름을 main으로 설정했기에)로 번들링 된 파일이 출력되며 그 위치는 ./dist 폴더임을 알 수 있다.

 

웹팩은 모든 파일을 로더로 바라본다. JS로 만든 모듈 뿐만 아니라 css, 이미지, 폰트 등 전부 모듈로 보기 때문에 import를 통해 JS 코드 안으로 가져올 수 있다. 이를 가능하게 하는 방법으로 로더(loader)를 사용한다. 로더는 다양한 리소스를 JS에서 바로 사용할 수 있는 형태로 로딩하는 기능이다. 로더는 타입스크립트 같은 다른 언어를 JS 문법으로 변환해 주거나, 이미지를 data url 형식의 문자열로 변환해 주는 역할을 한다. 

로더는 직접 만들 수도 있고, 이미 잘 만들어진 로더를 가져와서 사용할 수도 있다. 로더는 웹팩 설정 파일의 module 객체에 추가한다. 자주 사용하는 css-loader(css 파일을 모듈처럼 불러와 사용하게 해줌), style-loader(스타일이 동적으로 DOM에 추가되게 해줌), file-loader(파일을 모듈 형태로 지원하고 웹팩 아웃풋에 옮겨 줌) 등을 사용하여 작성한 예시 코드는 다음과 같다.

 

웹팩에서 또 알아야 할 개념이 플러그인이다. 로더는 파일 단위로 처리하는 반면, 플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다.

플러그인 역시 직접 만들 수도 있지만, 이미 잘 만들어진 웹팩 기본 플러그인과 서드 파티 라이브러리들이 많이 있다. 필요한 플러그인을 잘 찾아서 쓰면 웬만한 기능은 충분히 구현할 수 있다. 자주 사용하는 플러그인을 알아보자.

• BannerPlugin : 웹팩에서 제공하는 플러그인으로, 결과물에 빌드 정보나 커밋 버전같은 내용들을 추가할 수 있다.
• DefinePlugin : 웹팩에서 제공하는 플러그인으로, 여러 환경으로(개발/운영) 개발할 때 환경에 따라 API 주소가 다를 수 있는데 이러한 환경 의존적인 정보를 관리하기 위한 플러그인이다.
• HtmlWebpackPlugin : 서드 파티 라이브러리로, HTML 파일을 후처리 하는데 사용한다.
• CleanWebpackPlugin : 서드 파티 라이브러리로, 빌드 이전 결과물을 제거하는 플러그인이다.
• MiniCssExtractPlugin : 서드 파티 라이브러리로, CSS를 별도 파일로 뽑아내는 플러그인이다.

위에서 언급한 플러그인을 사용한 예제 코드는 다음과 같다.

위의 예제에서는 BannerPlugin을 통해 빌드 시간을 번들링된 파일에 추가하고, HtmlWebpackPlugin을 통해 HTML 파일을 동적으로 생성하며, CleanWebpackPlugin을 통해 빌드 전 아웃풋 폴더를 깨끗이 하고, MiniCssExtractPlugin을 통해 운영 환경에서 css 파일을 모듈에서 분리한다.

 

참고자료

1. https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html
2. https://d2.naver.com/helloworld/0239818