✔️ webpack

🐾 WHY

HTML에서 <script />로 자바스크립트 파일을 실행할 수 있다. 하지만 많은 자바스크립트 파일을 실행할 경우 웹앱에 병목현상이 생기게 된다. 이러한 현상을 해결하기 위해 하나의 큰 자바스크립트 파일이 필요하다. 하지만 한 파일에 모든 자바스크립트 코드를 넣게되면 흐름을 이해하기도 힘들고, 복잡도가 올라가 유지보수하기도 힘들다. 이때 webpack과 같은 모듈 번들러는 여러 파일을 하나의 파일로 묶어주기 때문에, 네트워크 병목현상을 최소화 할 수 있다.

🐾 HOW TO

1. webpack의 핵심 개념 : webpack.config.js 파일에서 설정할 수 있다.

• Entry : 시작점으로, 여러개의 entry도 가능하다.

• Output : 생성한 번들을 저장할 위치를 지정 한다. 기본값은 ./dist/main.js 이다.

• Loader : webpack이 이해 할 수 있는 모듈로 변경해 주는 역할

• Plugins : 번들된 파일을 난독화 하거나, 압축하는데 사용한다.

• mode
  * development

  • production
  • none

  ✔️ parcel

  🐾 HOW TO

  webpack과 다르게 별다른 설정없이 사용이 가능하다.

1. 설치 후, 번들링하고자하는 진입파일(entry)을 설정하면 된다.

   parcel index.html

   마무리

   현재 Webpack4 로 Zero-configuration(설정 파일 없는 빌드)가 가능한 버전으로 업그레이드 되었다고 한다.