Webpack 정리

---

개인적인 Webpack 학습 및 공부 내용을 기록하기 위한 포스트입니다.

---

1. Webpack 이란?

---

웹팩(Webpack)이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.

2. 모듈 번들링 이란?

---

웹 어플리케이션을 구성하는 수많은 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링 이라고 한다.

필요에 의해 압축, 분할 등 다양한 역할을 한다. 즉, 하나의 웹서비스를 구성하는 파일들을 해석 후 하나로 합쳐주는 역할을 하는 것이다.

3. NPM 으로 프로젝트 관리하기

---

npm init -y
npm i webpack webpack-cli -D
--------------------------------------
npm install webpack webpack-cli --save-dev
npm i loadash

신규 프로젝트 생성 후 NPM 으로 관리하기 위해 npm 설치 후 webpack 을 개발용 dependecies 로 설치해준다.

앞서 설명하였지만, 실제 개발에서 Application 에 직접적인 패키지가 아닌경우에 개발용으로 설치하여 운영 배포때는 배포가 되지않게 하는것이 좋다.

경량화를 위해 Package.json 을 확인하여 정상적으로 devDependencies 가 추가되었는지 확인한다.