Webpack이란?

Webpack은 왜 필요할까?

☄️말도안되는 거대한 하나의 파일

예전에 한 회사에서 일했을 때, 어떤 자바스크립트 파일을 본 적이 있습니다. 한 6만줄에 육박하는 아주 거대한 파일 이었는데, 이곳에 모든 변수와 함수, 그리고 프로토타입을 정의하고 있었죠. 그 파일 하나 여는데도 오래걸리고 열고 나서도 스크롤을 내리거나 할 때 코드 에디터가 굉장히 버벅였었죠. 버벅임은 둘째 치고, 그 하나의 파일 안에서, 자바스크립트 프로그램이 어떤 구조로 짜여져 있는지 파악하는게 굉장히 어려웠습니다. 저는 다시는 이런 파일을 다루고 싶지 않아요.

☄️거대한 파일 쪼개기

만드려는 프로그램의 코드를 하나의 파일 안에 모두 담는 것은 안티 패턴인 것 같습니다. 그럼 이에 대한 해결책은, 거대한 하나의 파일을 여러개의 작은 파일로 쪼개는 것이겠죠. 하나의 파일을 여러개의 파일로 쪼개면 여러가지 좋은점이 있습니다.

일단 프로그램의 전체 구조를 좀 더 쉽게 이해 할 수 있겠죠. 또 하나의 파일은 아무래도 관련 있는 코드들로 묶어놨을 것이기 때문에, 코드를 이해하는 데도 좋겠고, 코드를 관리하고 리팩토링 할 때도 좋겠죠.

☄️Webpack의 등장

Webpack은 위에서 다룬 문제점을 해결하기 위해 등장했다고 생각합니다. 프로그램을 짤 때는 사람이 이해하기 쉬운 방식으로 짜고, 이렇게 짜여진 코드를 모두 조립하여 실행할 수 있는 하나의 파일을 만드는 것. 사실 이런 개념은 빌드 라는 이름으로 프로그래밍 언어마다 존재하는 개념입니다. 자바스크립트에서 빌드를 해주는 녀석중 하나가 바로 웹팩인 것이죠. Webpack 이외에 자바스크립트의 빌드툴은 여러가지가 있습니다. 그 중 가장 유명한 녀석이 Webpack이고요.

사실 Webpack은 조각난 파일들을 단순히 조립하는 빌드역할만 하는게 아닙니다. Babel을 로드하여 ES6 문법을 재해석 하기도 하고, scss파일을 로드하여 css파일로 변환한다거나, png, jpg등의 이미지 파일을 파일 시스템 경로에서 어떻게 불러올 지 해석하기도 해야죠. 따라서 Webpack 은 빌드툴이다 라고만 말하는게 좀 부족해 보입니다. 외국에서는 Webpack이 뭐냐? 라는 질문에 모듈 번들러(module bundler)라고 하더군요. 웹팩이 생성해 내는 파일을 번들(bundle) 이라고 하는것 같아요.

Webpack의 기능

웹팩은 기본적으로 우리가 짠 여러 소스파일을 하나로 합쳐주는 역할을 수행합니다. 파일을 하나로 합치는 과정에서 우리가 생각할 수 있는 필요한 거의 모든 기능은 로더(loader)와 플러그인(plugin)으로 수행할 수 있습니다.

☄️로더

자바스크립트 프로그램을 짤 때, 파일을 여러개로 분리한다면 로더가 필요합니다. 로더를 설치하고, 설정해주면, 다음과 같은 식으로 사용할 수 있습니다.

1
2
3


import { myFunc }  from "MyModule"
import "mySCSS.scss"
import myImage from "static/images/myImage"

이렇게 어떤 파일 내에서 필요한 코드를 불러와서 사용할 수 있습니다. 이런식으로 프로그램을 짜다 보면, 결국 모든 파일이 유기적으로 엮이겠죠.

웹팩에는 다양한 종류의 로더가 있습니다.

css, scss등을 로드할 수 있게 해주는 로더(Styling)
- style-loader
- css-loader
- less-loader
- sass-loader
ES6 문법을 해석해주는 로더(Transpiling)
- babel-loader
- script-loader
jpg, png등의 이미지를 불러오는 로더(Files)
- file-loader
- raw-loader
- url-loader
JSON파일을 불러오는 로더(JSON)
- json-loader
그 외에도 다양한 로더가 있습니다. Linting, Testing, Framework 등등의 로더. 공식 홈페이지에서 로더 문서를 확인해보세요.

☄️플러그인

웹팩의 플러그인은 빌드 과정에서 필요한 역할을 수행해 줍니다.

MiniCssExtractPlugin: 웹팩이 빌드할 때, 스타일(css) 파일을 따로 분리해서 생성해줍니다.
CleanWebpackPlugin: 빌드 할 때, 이전에 빌드했던 파일을 삭제하고 새로 생성된 파일만 남기고 싶을 때 사용합니다.
HtmlWebpackPlugin: 웹팩이 빌드 후 만드어낸 번들 파일의 이름이 hash를 포함해야 할 경우 유용하다고 하네요. 파일 이름에 hash를 왜 포함해야 하냐면, 매번 똑같은 이름의 파일을 브라우저가 로드할 경우, 브라우저는 해당 파일이 이전과 똑같다고 판단하고(왜냐하면 이름이 이전과 같으면 같은 파일로 인식) 새로 빌드된 번들파일을 사용하지 않기 때문입니다.
그 외에 다양한 플러그인이 있으니, 공식 플러그인 문서를 확인해보세요.