[webpack]웹팩(webpack) 초기 설정 setting

 

이번에는 webpack 설정에 대해서 알아봅시다 👀

 

front-end의 필수 무기라고 할 수 있습니다.

 

먼저 등장 배경부터 알아보죠!

 

 

| 웹팩(webpack)이 왜 생겼을까? 꼭 필요할까?

 

- 대규모 project에서는 js 파일안에 많은양의 코드들이 존재합니다.

이 수많은 code line을 관리하려면 장난아니겠죠?

 

더 나아가 변수명도 만들기 힘들어집니다.

또한, 로딩하는데 속도가 파일이 크면 클 수록 장난 아니게 될겁니다.

 

결정적인 건, 신규 사이트들은 SPA를 활용한 방식의 사이트들이 많습니다.

SPA란 하나의 html page에서 여러개(연관된)의 js 파일들을 포합하는 page입니다.

따라서 흩어져있는 js파일들을 하나의 파일로 번들링해줄뿐더러, 성능 최적화도 도와줍니다.

 

따라서 webpack을 사용하는겁니다 👌🏻

 

 

| 그래서 webpack? 그게뭔데?

 

1.웹팩은 모듈 번들러(module bundler)입니다.

2.html 파일에 들어가는 javascript 파일들을 단 "1개"의 js파일로 묶어주는 역할을 해줍니다.

-> 이곳저곳 여러개의 javascript 파일들이 존재하더라도 이 웹팩이 1개로 파일을 합쳐줍니다.

 

| 모듈(module)? 모듈번들링?

 

모듈이란 특정 기능을 갖는 작은 코드 단위를 의미합니다. (ex a+b를 하는 함수, a-b를 구하는 함수)

이런 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 module이 됩니다.

 

아래의 그림처럼 수 많은 js파일들과 img파일등 많은 자원들을 연관성 있는 하나의 파일로 묶어주는 동작을 모듈 번들링이라고 합니다.

빌드, 번들링, 변환 이 세 단어 모두 같은 의미입니다.

 

| Webpack에서 module

 

- 웹팩에서 지칭하는 모듈이라는 개념은 위와 같이 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미합니다.

-웹 애플리케이션을 제작하려면 HTML, CSS, Javascript, Images, Font 등 많은 파일들이 필요하죠. 이 파일 하나하나가 모두 모듈입니다.

 

| 근데 꼭 웹팩을 사용해야하는걸까? 다른 건 없나요 ?

 

- 다른 도구들도 존재합니다. 하지만 웹팩이 우수한 퍼포먼스를 자랑합니다.

 

 

Browsify, Grunt, Gulp 등의 도구들은 webpack과 무슨 차이가 있을까?

 

-크고 복잡하며 다양한 리소스들이 들어있는 프로젝트에는 webpack을 사용하는 것이 좋습니다.

-Grunt, Gulp는 오로지 리소스들에 대한 툴로 사용되며 dependency graph에 대한 개념이 없습니다.

-Browsify는 비슷한 도구이지만 속도면에서 webpack이 더 좋습니다.