웹팩이란?
최신 프론트엔드에서 가장 많이 사용하는 모듈 번들러(Module Bundler)로 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등) 모두 각각의 모듈로 보고 이를 종합해서 병합된 하나의 결과물로 만드는 도구이다.
웹팩에서의 모듈
웹팩에서 모듈은 ESM(클릭)에 국한되지 않고 HTML, CSS, Javascript, Images, Font 등 이 모든 자원(리소스)을 모듈이라한다.
모듈 번들링이란?
웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 한다.
설치 및 설정
기본 설치
- Node.js 설치 후
$ npm init -y입력하여package.json생성해 놓는다. - 웹팩 설치는
$ npm i webpack webpack-cli -D로 개발용으로 설치한다. - 추가로
npm i lodash라이브러리를 배포용으로 설치한다. ./index.html및./scr/index.js생성- 테스트를 위한 소스코드 입력 : 튜토리얼 확인
- Live Server를 실행하여, 랜더링이 정상적으로 되는지 확인한다.
기본 설정
package.json안에scripts는 커스텀명령어를 정의할 수 있는 곳이다.scripts에"build" : "webpack --mode=none"추가하여bulid정의한다.- 터미널
$ npm run build실행하면./dist폴더와 함께main.js생성된다. - 기본값인
./dist와main.js가 아닌 다른 폴더명과 파일명으로 교체 할 수 있으며,
--output=폴더명/파일명.js키워드를 사용하여 변경 가능하다.
/* package.json */
"scripts": {
"build" : "webpack --mode=none --output=public/output.js"
},mode 란?
webpack 4 버전부터mode설정이 추가되었으면 'development', 'production', 'none' 3가지 구성되어 있다.mode설정을 안하는 경우 경고메세지가 출력되므로 현 강의에서는--mode=none(난독화 해제) 설정한다.
mode 값 설명 development 개발 모드 production 배포 모드 (기본 값) none 기본 최적화 옵션 설정 해제
wepack.config.js
commonJS 문법(ES5)을 사용하며, package.json의 scripts안에 커스텀명령어를 문자열로 나열되는 방식을 개선한 별도의 환경설정(Configuration) 파일이다.
기존 문자열 방식(관련 문서)
/* package.json */
"scripts": {
"build" : "webpack --mode=none --entry ./src/index.js --output-path public/"
},모듈 방식(관련 문서)
/* wepack.config.js */
var path = require("path");
module.exports = {
mode: "none",
entry: "./src/index.js",
output: {
filename: "./output.js",
path: path.resolve(__dirname, "public"),
},
};require("path") 설명
Node.js의 path 모듈은 파일 경로를 다루는 도구로 위에 path.resolve(__dirname, "public"), 선언처럼 __dirname 현재 폴더기준으로 public 폴더를 생성한다는 의미이다.
Path API 문서 : https://nodejs.org/api/path.html
웹팩으로 해결하려는 문제
파일 스코프 문제
<script src=""> 로드 방식의 변수 유효 범위 문제점을 ES6의 Modules(ESM) 문법과 웹팩의 모듈 번들링으로 해결된다.
브라우저 request 문제
TCP 스펙에 따라 각 브라우저에서 한번에 서버로 보낼 수 있는 HTTP 요청 숫자는 제약되어있다.
| 브라우저 | 최대 연결 횟수 |
|---|---|
| 익스플로러7 | 2 |
| 익스플로러 8~9 | 6 |
| 익스플로러 10, 11 | 8, 13 |
| 크롬 | 6 |
| 사파리 | 6 |
| 파이어폭스 | 6 |
| 오페라 | 6 |
| 안드로이드, iOS | 6 |
웹팩은 여러개의 파일을 하나로 병합하여 브라우저별 HTTP 요청 숫자 제약을 피할 수 있으며, 요청 횟수를 줄이기 때문에 그만큼 Response 받는 로딩시간을 단축한다.
정적 로딩 문제
웹팩이 아닌 일반적인 HTML 랜더링 상황에서는 현재 사용되지 않는 코드(리소스)라도 로딩이 된다. 이런 불필요한 리소스를 발생되는 문제를 개선하기 위해 웹팩의 Code Splitting 기능이 동적으로 모듈을 필요로 하는 순간(타이밍)에 로딩되도록 지원한다.
