Home

오늘의 기억

[Webpack] Webpack을 사용하는 이유



Webpack

요즘 Front-end 개발에는 Webpack이 빠질 수가 없다.
내 생각도 동일하다. 또한 개인적인 생각으로는 아무리 예전에 만들어진 Legacy 프로젝트라고 해도 만약 유지보수를 계속 해야한다면, 무리해서라도 Webpack으로 Migration을 하는게 좋다고 생각한다.

그렇다면 Webpack은 도대체 왜?! 쓰는 것 일까에 대해서 간략하게 정리를 하고자 한다.

(이 포스팅에선 Webpack에 대한 설명은 더이상 자세하게는 언급하지는 않는다.)


JavaScript 소스 관리

Legacy 프로젝트에서 JavaScript 소스를 어떻게 관리하는지 생각해보자.
일단 필요한 Library를 모두 <script> 태그를 통해 불러와야한다.
그리고 마지막에 작성한 JavaScript 소스코드를 불러온다.
가장 일반적인 구조이다.
그러나 만약 Dependency한 Library가 많아지고, 또한 직접 작성한 JavaScript 소스도 여러개라면?
특히 요즘같은 SPA로 개발하는 프로젝트라면, JavaScript 파일은 수십개 ~ 수백개가 될 것이다. 이런경우 더이상 <script> 태그를 사용하는 것은 거의 불가능에 가깝다.

Webpack을 쓰는 이유 중 가장 큰 이유가 이런 이유이다.
Webpack을 사용하게 되면 더이상 <script> 태그를 작성하지 않아도 되고,
JavaScript 소스가 아무리 쪼개져 있어도 Dependency 관리가 무척 쉬워진다.


JavaScript Module

JavaScript가 더욱 복잡해지고 기능이 많아짐에 따라 JavaScript 에도 모듈 시스템이 필요해졌다.
물론 Webpack 말고 Module을 지원하는 다른 라이브러리들도 있다.
하지만 Webpack은 ES6에 공식으로 채택된 import / export 문법을 지원하며, 이를 자유자재로 사용할 수 있다.
참고로 여기서 말하는 모듈은 외부에서 받아온 라이브러리일 수도 있고, 본인이 작성한 소스 일 수도 있다.


각종 플러그인 및 Loader

Webpack에는 각종 플러그인 및 Loader가 아주 많이 존재한다.
대표적으로 Babel을 이용해 최신 JavaScript 문법을 사용할 수도 있고,
ESLint나 Prettier를 이용하면 소스코드의 유효성 검사나 스타일 체크도 할 수 있다.

이처럼 Webpack을 쓰면 Interpreter 언어인 JavaScript를 Compile 언어 처럼 변신이 가능하다.

또한 css-loader를 같이 쓰게되면 CSS 파일도 JavaScript 파일 안에 합칠 수 있다.
이렇게되면 실제 개발은 JavaScript / CSS 따로 개발하지만, 별도로 Html에 CSS를 Import 시킬 필요가 없어진다.

이 외에도 webpack loader는 무궁무진하게 많이 개발되어 있고 유용한 것들이 엄청 많다.


선택이 아닌 필수

2000년대 초반처럼 JavaScript를 가지고 간단하게 DOM을 조작하거나, Alert창을 띄워주거나 하는 수준의 JavaScript는 Front-end 개발이라고 할 수 없다.
현재의 JavaScript는 별도의 어플리케이션이라고 할 정도의 수준이며,
그러기 위해선 webpack은 더이상 선택이 아닌 필수라고 말할 수 있을 것 같다.

20200301 Charyum.Park