Webpack 간단 정리하기

웹팩...봐도봐도 넘나 어려운 그것...웹팩에 대해 오늘 공부해 본 내용을 간단하게 정리해보고자 한다.

웹팩 핸드북은 내가 본 웹팩관련 사이트나 블로그 글중에 가장 설명히 간결하고 이해하기 쉽게 되어있어서 웹팩에 대한 개념을 정리하기에 정말 좋았다. 그리고 Jaehee'sWebClub 이 분 블로그에는 웹팩 핸드북의 더 디테일한 버전의 글이 올라와있는데, 핸드북으로 훑은 내용을 더 자세하게 읽어볼 수 있다.

추가적인 플러그인이나 더 자세한 내용에 대해서는 공식 문서에도 꽤 잘 나와있는 편이기 때문에 공식 documentation을 읽어 보는 것도 좋은 방법이다. 링크는 맨 아래 참고자료에 적어두겠다.

 

웹팩은 무엇인가?

작은 코드조각인 모듈들을 병합, 압축해서 하나로 만들어준다. 이러한 작업을 빌드, 번들링, 변환으로 부른다.

 

웹팩은 왜필요한가?

1. 자바스크립트의 특성상 전역 스코프를 공유하기 때문에 코드 충돌 문제가 있음

2. 코드를 수정하고 저장했을 때, 이를 다시 빌드하고 브라우저를 새로고침하는 번거로움이 있는데 웹팩이 이를 자동화시켜준다.

3. 위에 말한것 처럼 웹팩은 코드조각들을 병합, 압축해서 하나의 파일로 만들어주기 때문에 서버에 요청하는 파일 숫자를 줄인다. 따라서 web app의 빠른 로딩속도, 높은 성능을 기대할 수 있다.

4. 사용하지 않는 코드를 관리할 수 있다.

5. code splitting을 통해 원하는 때에 모듈을 로딩할 수 있는 Dynamic Loading & Lazy Loading 이 가능하다. (초기에 불필요한 것 까지 모두 로딩하지 않고 원하는 때에 원하는 것만 로딩)

 

웹팩의 주요컨셉

• entry: 웹 자원 변환을 위한 최초의 진입점으로서, entry point로 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 들어있어야 한다.
• output: 웹팩을 돌리고 난 후 결과물의 파일 경로
• loader: js파일이 아닌 html, css, images, font 등과 같은 웹 자원 들을 웹팩이 인식 할 수있도록 해주는 것을 loader라고 한다. loader는 특정 파일에 대해 여러 loader를 적용할 수 있으며, 오른쪽에서 왼쪽의 순서로 적용된다.
• plugin: loader가 파일을 해석하고 변환하는 작업을 한다면, 플러그인은 웹팩의 결과물의 형태를 바꿔주는 역할이다.
• mode: mode의 종류로는 none, development, production의 세가지 종류가 있다. 기본 값을 지정해주지 않을 경우 production모드로 지정된다. 각 모드에 따라 웹팩 실행 결과물이 달라진다. development 모드는 개발자들이 보기 편하게 웹팩 로그를 보여준다던가하는 기능이 있고, production 모드는 성능 최적화를 위해 기본적인 파일 압축 등의 빌드 과정이 추가된다. CLI를 통해 config파일에 mode 인자를 주어서 각 모드에 따라 다른 webpack설정이 적용되도록할 수 있다.
• devtool: 배포용으로 빌드한 파일에서 에러가 발생했을 때, 이를 디버그 하기 위해 원본파일의 어디에서 에러가 났는지를 연결 시켜주는 것을 소스맵(source map)이라고한다. 웹팩에서 제공하는 소스맵의 종류는 다양하며, 각 소스맵 종류에 따라 장단점이 있어 어떤 것은 배포용으로 적합하기도하고, 개발용으로 적합하기도 하다(각 모드에 따라 보통 사용하는 소스맵에 대한 설명). 소스맵을 설정할 때는 웹팩 설정 파일에 devtool 속성을 적고, 소스맵 옵션 명을 적어주면된다.

// webpack.config.js
module.exports = {
  devtool: 'cheap-eval-source-map'
}

 

webpack-dev-server

빌드 대상 파일이 변경되었다면 웹팩 명령어를 실행하지 않아도 자동으로 빌드 후 브라우저를 새로고침 시켜준다.

매번 명령어 치는 시간과 브라우저 새로고침하는 시간을 줄여주므로 매우 편리한 개발 툴이다. 일반 빌드와는 다르게 dev-server로 빌드한 경우 빌드의 결과물이 메모리에 저장되므로 production 시에는 웹팩 명령어를 사용해서 빌드해야한다.

 

html-webpack-plugin

지정한 html파일(보통 index.html)에 웹팩 빌드 내용을 스크립트로 추가해주는 플러그인 이다. 예를 들어 매번 빌드될 때마다 결과물 파일의 이름이 바뀌는 경우에 html-webpack-plugin을 사용하면 자동으로 결과물 파일을 포함하는 html파일을 만들어주기 때문에 손수 파일이름을 계속 바꾸지 않아도된다는 장점이 있다.

 

참고자료

웹팩 핸드북 링크

Webpack Guide for beginner #1

공식 webpack documentation