웹팩 초급편/고급편

웹팩 초급편

웹팩은 모듈(module) 번들러(bundler)다.

여기서 모듈은 각 리소스 파일을 말하고, 번들은 웹팩 실행 후에 나오는 결과 파일이다. 하나의 번들 파일은 여러 모듈로 만들어진다. 웹팩을 이용하면 우리가 제작한 여러 가지 리소스를 사용자에게 전달하기 좋은 형태로 만들 수 있다.

웹팩이 필요한 이유

2000년대 초반의 웹 페이지는 페이지가 바뀔 떄마다 새로운 HTML을 요청해서 화면을 매번 그리는 방식이었다. 자바스크립트는 돔을 조작하는 간단한 역할만 했기 때문에 HTML의 script 태그에 넣는 것으로도 충분했다. Ajax가 유행했을 때는 자바스크립트의 비중이 조금 더 커졌지만 그래 봐야 페이지당 자바스크립트 파일 몇 개면 충분했다. 그러나 단일 페이지 애플리케이션은 하나의 HTML에 수십, 수백 개의 자바스크립트 파일을 포함하기 떄문에 더는 기존 방식이 통할리 없었다.

모든 자바스크림트 파일을 script 태그로 가져왔고, 계속 늘어나는 자바스크립트 파일을 관리하기 힘들어졌다. 또한 실행되는 순서도 신경 써야 하고, 기존에 생성된 전역 변수를 덮어쓰는 위험도 존재한다.

그러나 웹팩을 이용하면 이러한 문제들을 해결할 수 있다.

웹팩 실행하기

npm install webpack webpack-cli
npx webpack

webpack-cli를 이용하면 CLI(command line interface)에서 웹팩을 실행할 수 있다.

로더 사용하기

로더(loader)는 모듈을 입력으로 받아서 원하는 형태로 변환한 후 새로운 모듈을 출력해 주는 함수다. 자바스크립트 파일뿐만 아니라 이미지 파일, CSS 파일, CSV 파일 등 모든 파일은 모듈이 될 수 있다.

자바스크립트 파일 처리하기

가장 먼저 자바스크립트 파일을 처리하는 babel-loader를 알아보면, babel-loader를 사용하기 위해 다음과 같이 필요한 패키지를 설치한다.

npm install babel-loader @babel/core @babel/preset-react react react-dom

이는 자바스크립트 코드에서 JSX 문법으로 작성된 리액트 코드를 처리하기 위해 필요한 패키지들이다.

만약 babel-loader를 설정하지 않고 웹팩을 실행하면 웹팩이 JSX 문법을 이해하지 못하기 때문에 에러가 발생한다.

CSS 파일 처리하기

npm install css-loader

css 확장자를 갖는 모듈은 css-loader가 처리하도록 설정한다. css-loader가 제공해 주는 기능인 css-module 기능을 이용하면 스타일 코드를 지역화할 수 있다. 또한, CSS 코드에서 사용된 @import, url() 등의 처리를 도와준다.

스타일을 실제로 적용하기 위해서는 style-loader가 필요하다. npm install style-loader

플러그인 사용하기

플러그인은 로더보다 강력한 기능을 갖는다. 로더는 특정 모듈에 대한 처리만 담당하지만 플러그인은 웹팩이 실행되는 전체 과정에 개입할 수 있다.

html-webpack-plugin npm install clean-webpack-plugin html-webpack-plugin

웹팩을 실행해서 나오는 결과물을 확인하기 위해서는 이전처럼 HTML 파일을 수동으로 작성해야 한다. 여기서는 번들 파일 이름에 chunkhash 옵션을 설정했기 떄문에 파일의 내용이 변경될 때마다 HTML 파일의 내용도 수정해야 한다. 이 작업을 자동으로 하는 플러그인이 html-webpack-plugin이다. clean-webpack-plugin은 웹팩을 실행할 때마다 dist 폴더를 정리한다.

DefinePlugin 이 플러그인은 웹팩에 내장된 플러그인이기 때문에 별도로 설치가 필요 없다. 모듈 내부에 있는 문자열을 대체해 준다.

ProvidePlugin 이 플러그인도 웹팩에 기본으로 포함되어 있기 때문에 별도로 설치가 필요 없다. 미리 설정한 모듈을 자동으로 등록해 준다.

웹팩 고급편

• 웹팩을 이용해서 애플리케이션의 번들 파일을 최적화하는 방법

• 웹팩이 내부적으로 어떻게 동작하는지에 대한 이해

나무 흔들기

나무 흔들기(tree shaking)는 불필요한 코드를 제거해 주는 기능이다. 나무를 흔들어서 말라 죽은 잎을 떨어뜨리는 것을 비유해서 지은 이름이다. 웹팩은 기본적으로 나무 흔들기 기능을 제공한다. 단, 웹팩이 알아서 모든 경우를 잘 처리해주면 좋겠지만 제대로 동작하지 않는 경우가 있다. 따라서 나무 흔들기를 잘 이해하고 있어야 번들 파일 크기를 최소로 유지할 수 있다.

코드 분할

애플리케이션의 전체 코드를 하나의 번들 파일로 만드는 것은 좋은 생각이 아닐 수 있다. 불필요한 코드까지 전송되어 사용자의 요청으로부터 페이지가 렌더링 되기까지 오랜 시간이 걸릴 수 있기 때문이다.(번들 파일을 하나만 만들면 관리 부담이 적어지므로 회사 내부 직원용 애플리케이션을 만들 때는 좋은 선택이 될 수 있다). 많은 수의 사용자를 대상으로 하는 서비스라면 응답 시간을 최소화하기 위해 코드를 분할하는게 좋다.

코드를 분할하는 가장 직관적인 방법은 웹팩의 entry 설정값에 페이지별로 파일을 입력하는 것이다.

SplitChunksPlugin 웹팩에서는 코드 분할을 위해 기본적으로 SplitChunksPlugi을 내장하고 있다. 별도의 패키지를 설치하지 않고 설정 파일을 조금 수정하는 것만으로 코드 분할을 할 수 있다.

출처

• 실전 리액트 프로그래밍 (프로그래밍인사이트-이재승)