Webpack 요약

Webpack이란?

모듈 번들러.

모듈 번들이란?

여러 모듈을 하나로 묶은 파일을 출력하는 도구 (※ 출력 설정에 따라 여러 파일을 출력 할 수 있음).

webpack 이외에 모듈 번들러가 있습니까?

Browserify

RequireJS

사용하는 이점은? 세 가지가 있습니다.

webpack이 종속성을 고려하여 하나의 파일로 정리해 주므로 개발자는 종속성을 전혀 파악할 필요가 없어졌습니다.

또, 파일이 1이 되는 것으로 브라우저가 Web 어플리케이션을 제공할 때에 읽어들이는 파일이 줄어들어, 이것에 수반해 HTTP 리퀘스트의 회수도 줄임으로써 유저에게 재빠르게 화면을 제공할 수 있게 된다.

HTTP 요청의 효율성은 요청되는 파일의 수와 크기에 정비례하므로 대규모 웹 응용 프로그램이 될수록 Webpack의 역할이 중요합니다.

어디서 사용할 수 있습니까?

Node.js 실행 환경에서 사용할 수 있습니다.

어떻게 사용할 수 있습니까?

npm 명령에서 도입하고 명령을 실행하면 사용할 수 있습니다 (아래는 개발 환경에서만 사용하는 경우)
$ npm install webpack webpack-cli --save-dev

설정 파일은?

webpack.config.js

아직 초점이 없지만. . .

여러 개의 js 파일을 작성한 후 명령으로 모든 js를 결합한 하나의 파일을 만듭니다.

브라우저에 표시할 때는 그 파일만을 읽기 때문에 표시도 빨라진다

이것으로 이미지를 솟습니까?

애초에 webpack이 필요했습니까?

자바스크립트가 인기가 되어 규모가 넓어져 많은 기능이 탄생한 결과
의존성 해결, 필요할 때 기능을 사용하기 위한 메커니즘이 필요하게 되었기 때문에

자바스크립트 모듈의 역사

JavaScript 프로그램은 매우 작은 것으로 시작되었습니다.
초기의 용도는, jquery 등 필요에 따라서 웹 페이지에 약간의 움직임을 추가하는 독립한 스크립트 처리가 대부분이었습니다.

이제 대량의 JavaScript로 작성된 애플리케이션까지 태어나게 되었습니다. (Angular, React 등)

따라서 최근에는 JavaScript 프로그램을 모듈로 분할하여 필요할 때 가져올 수 있는 구조의 제공을 검토하게 되었습니다.

Node.js(2011~)는 수년간 이 기능을 제공해 왔습니다.
모듈의 사용을 가능하게 하는 JavaScript 라이브러리나 프레임워크도 많이 있습니다
(예를 들어 CommonJS 나 RequireJS 등 최근에는 Babel).

2015년 ES modules라는 ES2015 사양에서 책정된 JavaScript 파일에서 다른 JavaScript 파일을 로드하는 구조가 탄생했습니다.

webpack의 경우는 이 표준 사양의 ES Modules를 사용할 수 있거나 node_modules의 모듈을 결합할 수 있다는 장점이 있습니다.
자세한 것은 이쪽
자바스크립트 모듈 시스템의 역사와 현상

참고 기사

ES modules란?
자바스크립트 모듈의 역사

webpack을 이용해 본다(입문편)