webpack이란?

webpack이란?

Webpack은 frontend, backend 구분없이 모두 사용할  수 있는 module bundler이다. webpack은 서로 연관성있는 웹 자원들(js, html, img, css)등을 묶는 작업(bundling)을 한다. 하나로 묶어서 최종적으로는 웹페이지의 성능향상 및 Web  task manger(Gulp, Grunt) 역할까지 한다.

 

* web task manger란? 

유닛 테스트, 린팅(소스코드 분석하여 오류 확인), 최적화 등 웹개발에 수반되는 시간 소모적이고 반복되는 태스크들을 자동화 시키는 작업을 말한다. 

webpack을 사용하는 이유?

• web loading 속도 Up
  1. 기존의 파일들의 의존성 관리 
  2. 요청하는 파일 줄이고 파일이 필요할 때 요청하기 
  
  
• js code based Modules 관리 
  1. 모듈화 문제를 해결하기 위해 bundler 출시 (AMD, Common.js, webpack) 등등 
  2. webpack은 특이하게 모듈관의 관계를 chunk단위로 나누어서 필요할 때 로딩
  3. 가독성 및 다수 모듈 미병행 처리등의 문제해결 때문에 webpack 등장
  
  
• ex) 모듈화 문제
   전역변수 충돌, 스크립트 로딩 순서, 복잡도에 따른  관리상의 문제 

주 철학 

1. 모든것(js, html, css)를 모듈화 시킨다.

  html, css, js등을 모듈화 시킨다. 

 

2. 필요한 것만 로딩시킨다.
  초기에 모든 것을 불러오지 않고 필요할 때 불러온다. 

 

요약 하자면

기존 web환경이 커지면서 수많은 라이브러리와 js, html, css 등을 관리하고 성능적인 면에서 이슈가 있다. 이러한 문제를 해결하기 위해 파일 들을 압축하여 module화 시키고 기존의 web task manger의 기능까지 합쳐서 만들어 진것이 webpack이다.