Webpack

Webpack

용도

1. 모듈관리수월화
2. 자연최적화

사용하는 이유 & 배경

• 새로운 형태의 Web Task Manager

  • 기존 Web Task Manager(Gulp, Grunt)의 기능 + 모듈 의존성 관리 (ex. manification을 webpack defailt cli로 실행 가능)

    webpack -p
  

• 자바스크립트 Code based modules 관리

  • 자바스크립트 모듈화의 필요성: AMD, Common js, ES6(Modules)
  • 기존 모듈 로더들과의 차이점: 모듈간의 관계를 chunk 단위로 나눠 필요할 때 로딩
  • 현대의 웹에서 js의 역할이 커짐에 따라 client side에 들어가는 코드량이 많아지고 복잡해짐
  • 복잡한 웹 앱을 관리하기 위해 모듈 단위로 관리하는 Common js, AMD, ES6 Modules 등이 등장
  • 가독성이나 다수 모듈 미병행 처리등의 약점을 보완하기 위해 Webpack이 등장

• 자바스크립트 모듈화 문제란?

  • 모듈화 하지 않으면 같은 스코프에서 실행되기 때문에 스크립트 로딩순서, 전역변수 충돌, 복잡도에 따른 관리상의 문제가 발생.
  • 이를 해결하기 위해 AMD및 기타 모듈 로더들. Webpack이 등장했다.

Webpack 의 철학

• Everything is Mododule
  • 모든 웹 자원(js, css, html)이 모듈 형태로 로딩 가능

    require("base.css")
    require("main.js")
  

• Load only 'what' you need and 'when' you need
  • 초기에 불필요한 것들을 모두 로딩하지 않고 필요할 떄 필요한 것만 로딩하여 사용

설치

npm i webpack -g
npm i webpack-cli -g