웹팩이란 한 프로그램으로 작동하는 하나의 파일을 여러 파일로 분할하고 구성할 수 있는 자바스크립트 모듈이다.
브라우저가 이해할 수 있도록 번들로 묶고 변환하는 과정을 거친다.
프로젝트 전체를 한단위로 분석한다. 지정된 메인 파일에서 시작하여 require 또는 import문을 참고해 프로젝트의 모든 의존성을 조사하고 로더를 이용해 처리한 후
번들로 묶은 자바스크립트 파일을 생성한다.
webpack에 대한 옵션 및 세팅에 대해 알아보자.
entry
의존성 트리의 루트 노드가 되는 진입점이다.
entry point는 상황에 따라 하나가 될 수 있고 여러개가 될 수 있다.
Key-value 쌍으로 object 형태로 정의되며 key는 식별자, value는 해당 파일이 위치한 경로이다.
output
entry로 부터 만들어낸 Build 결과물이 생성될 위치를 정의한다.
output.path를 통해 위치에 대한 상대경로 정의, output.filename과 output.chunkfilename으로 build된
파일의 이름을 정의한다.
resolve
require에서 모듈명을 어떻게 해석할지 정의하는 옵션, 관련된 모듈을 어느 위치에 있는 파일에서 가져올지 정의해준다.
module
의존성 트리내에서 각 모듈을 어떻게 핸들링할지 정의하는 옵션이다.modules.rules 식별자에 배열 형태로 각 로더 정의해주며 주의할 점은 배열의 오른쪽에서 왼쪽 순서로 적용되며
각로더들을 module.rules[i].test에 정규식을 통해 들어오는 소스파일을 컨트롤할 수 있다.
그러나 모든 파일이 모듈 옵션내 loader를 거쳐서 build 시키기 때문에 해당 시점에서 시간이 많이 걸리는 이슈가 있었다.
그래서 loader를 거치면서 build상황에서 최적화된 속도를 낼 수 있도록 도와주는 플러그인인 happypack을 사용하였다.
plugin
loader와 plugin은 비슷해보이지만 다르다.loader는 각 모듈을 어떻게 불러올 것인지?pluglin은 building이 끝난 후 최종적으로 나온 bundle파일에 대한 옵션을 주고 싶을 때 사용한다.
플러그인에 대해서 알아보도록 하자.
Webpack.ProvidePlugin
자바스크립트에서 필요한 모듈을 import / require하지 않고 해당 plugin에 정의함으로써
자동으로 로드 될 수 있도록 도와주는 플러그인이다.
Webpack.DefinePlugin
컴파일 시간에 구성할 수 있는 전역 상수를 만드는 플러그인이다.
주로 process.env를 사용하여 빌드 상태가 development인지 production 상태인지 구분한다.
Uglifyjs-webpack-plugin
번들링된 자바스크립트 파일에 대해 uglify같은 옵션을 주기 위해 사용되고 있는 플러그
인이며 cache설정, sourceMap사용여부, mangle(난독화), comments(주석제거여부), beautify(가독성적용),
unused(tree-shacking적용), drop_console(console로그 제거) 등 많은 옵션을 사요할 수 있다.
Webpack.LoaderOptionPlugin
build시 사용되고 있는 loader들에게 공통적으로 옵션을 넣어주는 플러그인으로 minimize옵션을 공통적으로 주기 위해 사용한다.
Html-webpack-plugin
번들링된 html파일을 최소화 시키기 위해 webpack에서 공통적으로 사용하고 있는 플러그인이며 build가 끝나고 만들어진 html파일에 대한 파일명을 재정의 시킬 수 도 있다.
Webpack.NameModulesPlugin
development상황에서만 사용되는 플러그인으로 HMR(Hot Module ReplaceMent)이 활성화 되어 있을 때 모듈의 상대 경로를 표시해주는 플러그인이다.
Webpack.HotModuleReplacementPlugin
development 상황에서 webpack-dev-server 함께 사용되는 중요한 플러그인으로 Hot Module Replacement인 코드 변경을 감지하고
자동으로 recompiling하여 페이지를 refresh시켜주는 역할을 지원하는 플러그인이다.
Webpack.HashedModuleIdsPlugin
Bundle된 파일에 대한 Hash값 적용을 지원하는 플러그인으로, 모듈의 상대 경로를 기반으로 4개의 문자열을 모듈 ID로 생성시켜주며,
production 상황에서 사용된다.
transfer-webpack-plugin
Build 폴더가 만들어질 때 Build 폴더 안에 www 폴더를 넣기 위해 사용하는 플러그인이다.
extract-text-webpack-plugin
require를 통해 정의된 css파일을 하나의 bundle 파일로 Build 시키기 위해 필요한 플러그인으로,
style-loader와 css-loader 등과 같이 사용된다.
Webpack.optimize.CommonsChunkPlugin
여러 Entry Point에서 사용하는 공통 모듈을 별도의 파일로 분리하는 플러그인으로, 분리된 공통 모듈은 초기에 한 번만 다운받으며,
추후 사용 시에는 캐싱되어 사용됨으로써, 페이지 로딩 속도를 빠르게 도와준다.