Webpack은 @sokra(Tobias Koppers)와 컨트리뷰터들이 구현하고 있는 자바스크립트 기반의 모듈 번들러와 그를 받쳐주는 라이브러리(webpack/lib), 그리고 에코시스템(플러그인, 로더)들을 의미합니다.
스포카에서는 2014년 12월부터 React.js를 전면 도입하여 새 버젼의 적립 애플리케이션을 제작하고 있습니다. 이 개발 과정을 뒷받침해주고 있는 가장 중요한 도구를 말하라고 한다면 두말할 것도 없이 Webpack일 것입니다.
사실 Node.js나 파이썬 같은 환경에서 개발을 해본 사람들에게는 모듈이라는 개념이 익숙하지만, 웹 프론트엔드 개발자에게 모듈이라는 개념은 조금 낯설 수 있는 것이 사실입니다. require.js와 같은 AMD 시스템 또는 Browserify같은 도구를 이용해 본 경험이 없다면 말이죠.
모듈이라는 것은 굉장히 중요합니다. 모듈 시스템을 갖춘 환경에서 일해본 사람은 어떤 이유에서든 그 중요성에 모두 공감할 것입니다. 하지만 웹에는 표준적인 개념의 모듈이라는 것이 없었습니다 (사실 아직도 제대로 된 것은 딱히 없습니다만). 그렇기 때문에 자바스크립트 모듈을 사용하기 위해서는 모듈을 다룰 수 있는 시스템 (RequireJS, CommonJS 등)이 필요하고, 모듈들의 내용과 export들을 이해하고 원하는 형태로 변형할 수 있는 도구가 필요합니다. Webpack과 Browserify는 이런 것을 해 주는 도구이며 보통 모듈 번들러라고 칭해집니다. [^1]
그렇다면 왜 Webpack일까요? Webpack은 강력하며 모듈을 가장 잘 이해하고 가장 필요한 것을 잘 해주는 도구들의 모음이자 라이브러리입니다. 웹팩을 이용하면 설치하자마자 바로 watch mode, hot loading, 다양한 소스맵 옵션까지 모듈을 다루는 데에 필요한 모든 도구들을 사용할 수 있습니다. [^2] 웹팩의 플러그인 시스템은 크게 loader와 plugin이 있습니다.
loader는 모듈들을 전처리해주는 모듈입니다. 자바스크립트부터 시작해 커피스크립트, ES6/ES2015 모듈, 이미지, 그 외 파일까지 loader로 전처리해서 번들에 포함시킬 수 있습니다. 보통 로더 모듈들에는 -loader postfix를 붙이는 컨벤션이 있습니다 (jsx-loader, url-loader, style-loader 등)
[^1] Brocolli, SystemJS같은 다른 비슷한 프로젝트들도 있지만 이 글에서 따로 언급하지는 않겠습니다. [^2] Grunt와 Gulp같은 도구와는 약간 다릅니다. 그것들은 조금 더 로우레벨의 러너이며, 웹팩과 조합하여 사용하는 것도 가능합니다.
http://qiita.com/yosisa/items/61cfd3ede598e194813b