0.Webpack개념
1.Webpack등장배경
2.Webpack사용이유
3.Webpack-cli란?
4.Webpack의 Loader란?
Webpack
Webpack 이란?
웹팩은 모듈번들러이다. 모듈번들러는 여러개의 파일을 하나의 파일로 묶어주는 라이브러리를 말한다.
위 그림은 Webpack의 첫 페이지에 등장하는 그림이다. 위의 그림을 보면 모듈 번들러가 무엇인지 유추가 가능하다. Webpack 모듈 번들러는 파일의 종속성을 스스로 파악하며, 종속성이 있어 서로 엮여 있는 파일을 하나의 파일로 묶어주는 역할을 한다.
Webpack 등장배경
서버에서 처리하는 로직을 JS(JavaScript)로 구현하는 부분이 많아지면서 웹 서비스 개발에서 JS로 작성하는 코드의 양도 늘어났다. 코드의 양이 많아지면 코드의 유지보수가 쉽도록 코드를 모듈로 나누어 관리하는 모듈 시스템이 필요하지만 JS는 언어 자체가 지원하는 모듈 시스템은 없다. 모듈번들러 등장 전에 JS는 각각의 파일을 모듈처럼 분리시켜 html파일에서 script 태그로 불러오는 방식으로 모듈화 하였다.
이와 같은 모듈화는,
•html에서 JS파일을 불러들이는 순서가 중요해지며.
•JS파일을 각각의 파일로 나눠도 모두 글로벌 변수(전역 변수)로 생성되어 Scop에러 발생.
•다른 사람의 코드를 그대로 가져오기 힘든 문제가 있었다.
이러한 문제들로 JS를 범용화하기 위한 모듈번들러가 등장하기 시작했다. 그중 하나가 Webpack이다.
Webpack 사용 이유
Webpack과 같은 유사한 작업을 하는 도구들 중에는 Browserify, Grunt, Gulp 등이 있다.
그렇다면 왜 위 도구들보다 Webpack이 나은지 그리고 무슨 차이가 있을까?
기존에도 웹 개발 생산성을 높이기 위해 Grunt, Gulp와 같은 도구들로 개발 라이프 사이클을 줄일 수 있었지만 그에 더 나아가 Webpack은 모듈 의존성까지 관리해주는 특징이 있다.
기존 Task Runner인 Grunt, Gulp는 오로지 리소스들에 대한 툴로 사용되며 dependency grapch에 대한 개념은 없었다. Webpack은 Package Bundler이며 Gulp는 Task Runnder이다.
Package Bundler(의존성,종속성을 가진 애플리케이션 모듈을 정적인 소스로 재생산)
Task Runner(반복 가능한 특정 작업을 자동화)
다시 말해, Task Runnder는 그저 미리 정의해 놓은 어떠한 작업을 실행하는 것이고 Package Bundler는 말 그대로 소스들을 하나의 패키지화 하는 것이다. Grunt와 Gulp는 일련의 태스크를 정의하고 실행하면 번들링도 할 수 있는 도구이지만, Webpack은 애초부터 의존성 관리까지 포함한 번들링을 위해 나온 도구이다.
연필을 계속해서 뾰족하게 깎다보니 제법 이도 쑤실 수 있게 된것이 Gulp, Grunt이고 청음부터 이쑤시개라고 이름 달고 나온것이 웹팩이다.
참조: https://webclub.tistory.com/635
Webpack-cli란?
터미널에서 webpack커맨드를 실행할 수 있게 해주는 커맨드 라인 도구이다.
Webpack의 Loader란?
Loader는 모듈을 입력 받아 처리하는 과정과 관련된 속성을 의미한다.
웹팩의 의존성 그래프를 완성시키는 과정에서 의존 관계를 갖는 다양한 타입의 모듈들을 입력받고 처리하는 역할을한다. 모듈을 입력받아 해설할 때 JS파일이나 Json파일을 기본 모듈로 보며, 만약 다른 파일을 모듈로 불러와서 사용하게 될 경우, loader라는 요소를 설정해야 그 파일들을 모듈로 불러와서 번들링 할 수 있다.
Webpack Loader의 종류
• CSS Loader
• Sass Loader
• Style Loader
• File Loader
• URL Loader
