모듈이란, import/export 등으로 재사용이 가능한 코드 조각으로 JS 파일 등을 일컫는다.
번들러란, JS, CSS, 이미지 등의 파일을 묶어주는 작업으로, Webpack은 묶어주는 역할을 하기 때문에 Bundler라고 한다.
Bundling 작업이 끝나면 기존 스크립트에서 import/export가 사라지기 떄문에 일반 스크립트로 취급된다.
Webpack의 특징
여러 개의 파일을 하나로 Bundling하기 때문에 HTTP 요청 횟수를 줄일 수 있다.
여러 종속성으로 얽혀있는 JS 파일을 정리해서 하나로 빌드해주기 때문에 배포할 때 유용하다.
CSS, 이미지 등 리소스를 import 해주기만 하면 Webpack이 알아서 빌드해주는 동시에, 코드를 수정했을 때 다시 빌드하고 새로고침 하지 않아도 된다.
Webpack ver.4 부터 webpack.config.js 파일 없이 Bundling이 가능하나, 필요에 따라 추가 설정이 가능하다.
Webpack은 배포할 때 필요한 패키지가 아닌 개발할 떄 필요한 패키지이므로 -D 옵션을 사용하여 npm install 해야 한다.
Webpack의 4가지 핵심 개념
entry
webpack의 출발 지점을 알려주는 것이므로, 상대 경로로 지정할 수 있다.
output
Bundling 결과를 어디로 내보낼지 지정하는 속성
loader
원래는 JS와 JSON 파일만 이해할 수 있는 Webpack을 다른 포맷의 리소스도 Dependency 그래프에 추가시켜주는 속성이다.
test
어떤 파일을 변환할지 지정하는 속성으로 정규표현식으로 작성한다.
use
파일을 변환할 때 어떤 loader를 사용할지 명시하는 속성이다.
위의 두 속성을 설정하고 나면 import ‘../css/index.css’; 등을 해석할 수 있게 된다.
babel
바벨은 ES6+ 문법으로 작성된 JS 파일을 ES5 문버븡로 해석하게 해준다.
plugin
Webpck dev-server
코드를 수정했을 때 다시 빌드하고 새로고침 하지 않아도 바로 빌드 결과를 확인할 수 있는 dev-server를 설정
webpack이 필요한 이유는 서비스를 접근하는 브라우저와 서버의 자원을 최대한 적게 사용해서 운용하기 위함이다.