bundler 1 - WEBPACK

1. node.js 를 설치를 한다

2. node.js의 프로젝트 폴더를 설정( npm init -y)

3. package.json이 생기면 npm install -D(개발을 하기위한 옵션) webpack webpack-cli 으로 웹펙을 설치

4. index.js와 같은 엔트리 파일을 생성하여 번들러를 만들 준비를 한다.

5. 설치한 webpack을 실행할때는 npx 를 사용 npx webpack --entry ./source/index.js --output-path ./public/index_bundle.js

우리의 입구에 해당하는 파일은(entry file) source안에 있는 index.js이고 public안에 있는 index_bundle.js로 아웃풋을 만들꺼야 라는 의미

 

번들러를 사용하지 않으면 여러 파일을 로드하기 때문에 충돌이 일어날 수 있지만

번들러를 사용하면 여러 파일을 하나의 파일로 만들어주기 때문에 이러한 점을 방지할 수 있다.

또한 최신 브라우저에서만 돌아가는 문법(ES6)을 오래된 브라우저에서도 돌아갈 수 있도록 변환까지 해준다.