사진 출처 :https://webpack.kr/
들어가기에 앞서 ...
모듈이란 ?
간단히 말하면 각각의 분리된 파일들을 모듈이라고 이라고 합니다. 전체 애플리케이션의 일부를 독립된 코드로 분리한 파일로 나누어 관리하는 것을 모듈화라고 합니다.프로그램을 모듈로 개발하고 배포할 수 있게 하기 위해 CJS, AMD, UMD, ESM 등 모듈 패턴이 등장했었습니다.
모듈화를 통해 기능별로 구현된 코드를 재사용할 수 있고, 코드가 캡슐화되기 때문에 임의적으로 코드가 변경되는 것을 방지할 수 있다는 장점들이 있습니다.
그러나, 프로그램이 커질수록 파일의 갯수가 많아져 각 변수들의 스코프나 호출 시 발생하는 네트워크 비용과 시간이 늘어난다는 한계가 있습니다.
번들링(Bundling) & 번들러 (Bundler)
이를 해결하기 위해 나온 방법이 번들링입니다.
웹서버에 배포하기 전에는 하나의 파일로 묶는데 이렇게 하면 브라우저에서 서버로 요청하는 HTTP 갯수가 줄게되며 사용자 경험을 향상시킬 수 있습니다. 또한, 코드의 크기를 줄이는 것 뿐만 아니라, 코드 난독화, 최적화 등을 지원하기 때문에 보안과 성능 향상에도 크게 기여합니다.
모듈화된 파일을 하나의 모듈을 묶는것을 번들링이라고 하고, 여러개의 서로 연관된 파일을 하나의 번들 파일로 묶어주는 것을 모듈 번들러라고 합니다.
WebPack이란 ?
webpack은 여러 개의 모듈(javascript, css, html, image 등)을 하나의 javascript 파일로 묶어주는 모듈 번들러(bundler)입니다.
import "./App.css";위 명령문은 App 컴포넌트에 관련된 CSS를 불러옵니다. 어떤 변수 이름이나 from 지시가 없다는 것을 주목해주세요. 이 특별한 import 구문은 JavaScript 모듈 구문이 아니라 웹팩(Webpack)으로부터 온 것입니다. 웹팩은 create-react-app이 우리의 모든 JavaScript 파일을 함께 번들하고 브라우저에 제공하기 위해 사용하는 도구입니다.
WebPack의 4가지 핵심 속성
- Entry : webpack을 통해 변환하려는 자원의 최초 진입점, entry를 사용하여 묶고자 하는 파일의 첫번째 진입점을 설정해주면 됩니다.
-> 기본값은 ./src/index.js이지만, webpack 설정에서 entry 속성을 설정하여 다른 (또는 여러 엔트리 포인트)를 지정할 수 있습니다. - Output: 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 합니다.
-> 기본 출력 파일의 경우에는 ./dist/main.js로 , 생성된 기타 파일의 경우에는 ./dist 폴더로 설정됩니다. - Loaders :webpack은 기본적으로 JavaScript와 JSON 파일만 이해합니다. 로더를 사용하면 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환 하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가합니다.
- Plugins : 번들을 최적화하거나, 애셋(asset)을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업을 수행 할 수 있습니다.
- Mode :webpack에 내장된 최적화 기능을 사용할 수 있습니다.
웹팩 버전 4부터 Development(개발)과 Production(배포) 두 모드를 정의할 수 있게되었습니다.
