Webpack 을 이용한 모듈 관리

Webpack이란?

한마디로 말하자면 여러 모듈들(.ts, .sass, .jpg, .png 등) 을 알아서 특정 번들로 합쳐주는 기능을 담당 한다.

알아서 합쳐주기 때문에 각 모듈 설정 충돌오류를 깔끔하게 해결 할 수 있다.

더불어 웹브라우저에게 여러개로 쪼개진 js가 아난 묶음 파일로 전달 하므로 IO 비용(속도적 측면)에서 도 이득을 볼 수 있다.

비슷한 역할로 Parcel 이란것도 있다. 이는 별다른 설정이 없어 Webpack 보단 미니멀 하기 때문에 빠른 빌드가 필요한 소규모 프로젝트에 적합하다.

다만, 다양한 설정을 할 수 없으니 세부적인 설정을 하고 싶다면 Webpack을 비켜 갈 순 없다.

Webpack 4 부터는 Zero-configuration을 지원하므로 사실상 아무런 고민하지 말고 그냥 Webpack을 쓰면 된다.

더 자세히 알고 싶다면 웹팩을 사용해야 하는 이유 참고하도록 한다.

 

설치방법

글로벌하게 설치해서 어디서든 실행 할 수 있도록 한다.

$ npm install --global webpack webpack-cli

 

실행 방법

프로젝트 내 webpack.config.js 파일을 상황에 맞게 작성 한다.

 

콘솔 명령을 통해 웹팩으로 번들링 한다.

$ webpack

 

이제 webpack.config.js의 설정에 의해 최종적으로 빌드 된 js 파일을 배포 및 사용하면 된다.

 

 

 

 

 

코드 스플릿팅

하나의 번들로 합치다 보니 첫 진입시 로딩과정이 오래 걸릴 수가 있다. 이를 해결 하는 방안을 알아보자.

 

 

코드 난독화

완성된 JS 코드를 배포 할 때 변수명이나 함수명 등이 작업한 그대로 유출되어봐야 이득 될 것이 한개도 없다.

이를 webpack 번들화 과정에서 알아보기 힘들게 만들 수가 있다.

https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

 

* 웹팩4 부터는 optimization.minimize 옵션으로 대체 되었다. (production 모드에서는 자동으로 켜지기 때문에 신경 쓰지 않아도 된다.)

 

 

참고자료: https://www.zerocho.com/category/Webpack