webpack이란

이번에 회사에서 빌드 성능 개선을 위해 웹팩을 깨작깨작 만져보았다. 웹팩이란 무엇인지 왜 사용하는 것인지 알아보자.

webpack

Webpack이란?

웹팩이란 무엇일까? 프론트엔드에서 사용하는 모듈 번들러이다. 모듈이란 무엇일까? 모듈이란 비슷한 기능들을 모아놓은 것을 모듈이라고 한다. 그러니까

// calc.js

export function sum(a, b) {
  return a + b
}

export function sub(a, b) {
  return a - b
}

이와 같이 계산하는 기능 함수를 가지고 있는 calc.js 파일을 모듈이라고 한다. 웹팩에서는 자바스크립트 뿐만 아니라, css, html 파일도 모듈로 볼 수 있다.

번들링이란? 파일들을 압축시키고 병합 시켜주는 것이다. 그러니까 모듈 번들링이란 비슷한 기능들을 모아놓은 파일들을 압축시키고 병합시켜주는 것 을 말한다.

우리는 왜 모듈 번들러가 필요할까?

웹팩은 나 대신 파일 단위로 코드를 관리해준다.
- 프로젝트가 커지면 내가 예전에 사용했던 함수명이 생각 안 날 수도 있다. 그래서 그 파일들을 그냥 import 했을 때, 의도한 대로 기능이 돌아가지 않을 수도 있다. 그렇다고 함수 하나, 변수 하나 만들 때마다 전체 파일에서 이름을 검색해가며 코드를 짜야 한다면 무척 수고스러운 개발이 될 것이다. 웹팩은 이러한 귀찮음으로부터 우리를 해방해줄 수 있다.
웹팩은 자동화 도구로 나를 도와준다.
- 웹팩에는 Scss 같은 css 전처리기를 변환해주거나, 큰 파일을 작게 압축시켜주기도 한다. 덕분에 우리는 수정할 때마다 위의 작업을 하지 않아도 웹팩이 알아서 처리해준다.
웹팩은 나의 웹 페이지를 더욱 빠르게 만들어준다.
- 웹팩은 코드를 압축하여 서버와 통신하는 파일 수를 줄일 수 있다. 또한 레이지 로딩 방법으로 필요한 자원만 요청할 수 있어 초기 화면 로딩 속도를 줄일 수 있다.

Webpack의 핵심 속성

웹팩의 파일 변환 과정을 이해하려면 핵심 속성을 알고 있어야 한다.

Entry (String)

웹팩은 엔트리 포인트에서 시작한다. 엔트리는 그 시작점을 웹펙에 알려주는 역할을 한다. 엔트리 포인트에서부터 필요한 모둘을 엮어 의존성 그래프를 빌드하고, 후에 빌드된 모듈을 번들로 묶는다.

엔트리 포인트가 되는 파일에는 어떤 것들이 들어가 있을까? 웹팩은 엔트리 파일로 웹의 연결 관계를 파악하기 때문에 웹을 시작할 수 있는 코드들이 들어가 있어야한다. 이런 시작점은 여러개가 될 수 있다. 다수의 시작점은 어디로 진입하냐에 따라 페이지 정보가 달라지는 멀티 페이지 애플리케이션에 적합하다.

// webpack.config.js

entry: './src/index.js'

Output (Object)

웹팩을 다 돌리고 난 후에 번들 파일이 어디로 나올지 정해주는 경로를 정할 수 있다. filename은 기본으로 정해줘야한다.

// webpack.config.js

output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, './dist')
}

Loader (Object)

웹팩은 사실 자바스크립트 파일과 JSON 파일만 이해한다. 하지만 이 Loader 속성을 설정하면 다른 자원의 파일들도 웹팩에게 이해시켜줄 수 있다.

Loader에는 파일을 식별할 수 있는 test 가 있다. ex) test: /\.(sa|sc|c)ss$/, use에 지정해준 로더를 이용해 test의 파일들을 변환하라고 설정 할 수 있다. 로더의 적용 순서는 왼쪽 👈 오른쪽이다.

// webpack.config.js

module: {
  rules: [
    test: /\.(sa|sc|c)ss$/,
    use: ['css-loader', 'sass-loader']
  ]
}

Plugin (Array)

플러그인 속성은 웹팩의 기본적인 동작에 추가 기능을 더하는 것이다. 약간… 필자가 느끼기에는 아바타에 캐시로 산 옷을 입히는 것 같다. 그만큼 많은 내장 플러그인이 있고, 설치하여 사용하는 외장 플러그인도 있다.

// webpack.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

plugins: [
  new BundleAnalyzerPlugin() // 빌드 후 파일 크기를 확인할 수 있는 플러그인 
]

마치며

웹팩에 대해 막연하게 어렵게만 생각했었는데, 그리 어렵지 않았다. (물론 내부 동작까지 깊게 들어가면 어려워지겠지만…) 플러그인을 사용하면 빌드도 작게 할 수 있어 빌드 속도 뿐만 아니라, 초기 렌더링 속도도 높일 수 있으니 얼마나 멋진 번들러인지 모르겠다. 여러 플러그인이 있으니 꼭! 사용해보는 것을 추천한다. 필자도 하나씩 설명을 읽어가며 웹에 옷을 입혀가는 중이다.