웹팩의 엔트리 포인트를 설정하는 방법은 여러가지가 있다. 1. 단일 진입점 module.exports = { entry: "src/b.js" } // or module.exports = { entry:["src/b.js","src/c.js"] } 진입점이 2개가 되어도 상관없다 저 2개의 파일을 합쳐서 번들로 만들어준다. a.js 파일은 변수 2개를 사용하고 그것을 export하고 있다. b.js는 a.js의 변수를 사용하고 c라는 변수를 만들어 export하고 있다. a.js -> b.js b.js -> c.js (여기서는 간단한 예제이지만 실무에서는 무수히 많은 파일이 이런 관계에 있을것이다.) 실행을 하게되면, 번들링된 파일을 html에 load시켜보면 , console에 찍히는것을 볼 수 있다. ..

webpack은 app을 프로세싱할때 내부적으로 프로젝트에 필요한 모든 모듈들을 매핑하는 종속성그래프라는 것을 만들고 한개 이상의 번들파일을 만들어낸다. 언제나 하나의 파일은 다른 파일에 의존한다. 웹팩은 이것을 의존성으로 취급한다. 웹팩은 이미지나 폰트, 다른 리소스들까지도 의존성을 제공한다. 웹팩이 번들링 처리를 할때 그 시작은 config file의 entry points다. 웹팩은 제귀적으로 의존성그래프를 만들고 그것을 이용해서 모든 모듈들의 번들링을 한다. 이 core concepts를 알면 설정을 할 수 있게 된다. entry부터 차근차근 포스팅 하도록 하겠다.

웹팩을 왜 사용하는지 이해하기 위해서는 번들링 하기 전에서의 브라우저 상황을 알아야한다. 브라우저에서 자바스크립트 파일을 실행시키는 방법은 2가지가 있다. 첫번째는 스크립트를 각각의 기능별로 만들어서 include시키는 방법이다. ex) 이렇게 스크립트를 로드하면 network bottleneck 이 일어날 수 있다. 두번째는 하나의 겁나 큰 .js file 을 작성하는것이다. ex) 이렇게 파일을 로드 하는것도 함수, 변수의 스코프 문제나 가독성등 여러 문제가 있다. // javascript categori에서 다루기 즉시실행함수의 등장으로 스코프충돌을 겪지않고 .js 파일들을 합칠 수 있게 되었지만 하나의 파일을 수정하면 전체 파일이 다시 로드 되어야 한다는 치명적인 단점이 있었다. lodash로부터..

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. 웹팩은 모듈 번들러이다. 웹팩의 주된 목적은 브라우저에서 사용하는 자바스크립트 파일을 번들해주는 것이지만 다른 리소스들또한 번들링,패키징이 가능하다. cf). what is bundle? 묶거나 묶은 재료 또는 수량의 모음. 1. 모듈 시스템을 이용하여 코드를 작성함 2.다른 파일에서 불러서 사용 (여기서는 2개의 파일밖에 없지만 프로젝트에서는 의존성을 가지..