[webpack] 공식문서 공부하기 (2). why use webpack?

웹팩을 왜 사용하는지 이해하기 위해서는 번들링 하기 전에서의 브라우저 상황을 알아야한다.

 

 

브라우저에서 자바스크립트 파일을 실행시키는 방법은 2가지가 있다.

 

 

 

 

첫번째는 스크립트를 각각의 기능별로 만들어서 include시키는 방법이다.

ex)

편의를 위해 한줄로 썻지만 한 스크립트에 10줄의 코드가 있다면?  또 스크립트가 1000개가 있다면?그 양이 엄청나다.

이렇게 스크립트를 로드하면 network bottleneck 이 일어날 수 있다.

---

두번째는 하나의 겁나 큰 .js file 을 작성하는것이다.

ex)

하나의 스크립트에 한 2만줄정도 되는 코드가 들어간다고 생각해보자..

이렇게 파일을 로드 하는것도 함수, 변수의 스코프 문제나 가독성등 여러 문제가 있다.

// javascript categori에서 다루기

---

즉시실행함수의 등장으로 스코프충돌을 겪지않고 .js 파일들을 합칠 수 있게 되었지만 하나의 파일을 수정하면 전체 파일이 다시 로드 되어야 한다는 치명적인 단점이 있었다.

lodash로부터 단일 함수를 사용하여 개발을할수도 있지만 그 함수안에 모든 의존성 라이브러리를 추가해야 하고, lazy loading도 가능하겠지만 그 과정이 매우 어렵고 복잡하다는 문제점도 있었다.

 

결국 모든 문제가 자바스크립트가 모듈화가 되지 않았기 때문에 일어난 일이다.

 

node의 등장으로 자바스크립트가 브라우저 밖에서 실행가능하게 되고, commonJS의 모듈화가 도입되면서 스코프 문제가 해결되었다.

 

하지만 여전히 브라우저 내에서의 문제가 해결되지 않았다.

 

commonJS는 여전히 node에서만 실행이 되고 , 브라우저에서는 모듈을 지원하지 않는다..

commonJS모듈을 사용하기 위해 RequireJS 나 SystemJS를 사용하지만 이마저도 그리 좋은 효율을 보이지 못하는것 같다.

 

 

 

그런 브라우저 안에서의 여러문제를 해결하기 위해서 나온것이 바로 webpack이다. 

webpack이 짱이에요.

 

 

결국엔 브라우저내의 스크립트를 부를때의 효율성이나 여러가지 문제때문에 webpack이 나오게 된것이다.

 

공부하면서도 setting이 참 어렵게 느껴지지만 왜 webpack을 사용해야 하는지에 대해서 공부해보니 

좀더 머릿속에 들어오는것 같다..

 

 

 

 

다음엔 webpack설정에 대해 포스팅하기로 하겠다..