회사에서 Webpack 을 사용하고 있음에도 자세히 몰랐었는데,
(😅웹팩.. 그냥 번들링하는애..아닌가요 의 수준?)
Webpack 이 무엇인지! 그리고 왜 필요한지! 어떤 기능들을 제공하는지!
에 대해 공부해보고 정리해 보았습니다!
Webpack 에 대한 정의를 구글 검색창에 검색해 봤을때, 아마 여러분들은 아래와 같은 문장을 만나게 될 것입니다.
Webpack은 자바스크립트 애플리케이션을 위한 모듈 번들러입니다.
저 또한 이 문장을 보고 모듈.. 번들러요..? 그게 뭔데요..? 싶었기 때문에 먼저 모듈과 번들러에 대해 알아보겠습니다!
자바스크립트에서의 모듈 이라는 개념은 특정 기능을 갖는 작은 코드 단위 를 의미합니다.
// math.js
function sum(a, b) {
return a + b;
}
function substract(a, b) {
return a - b;
}
const pi = 3.14;
export { sum, substract, pi } //ES6 Modules 문법
Webpack 에서의 모듈 이라는 개념은 웹 애플리케이션을 구성하는 모든 자원(HTML,CSS, JS, Image, Font 등)을 의미합니다.
의존성이 있는 모듈 코드를 하나(또는 여러 개)의 파일로 병합 및 압축해주는 도구를 의미합니다.
@import
, url(...)
구문이나 HTML 내부의 <img src=...>
태그 등)참고
- Webpack 핸드북
https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html- [Naver D2] JavaScript 모듈화 도구, webpack
https://d2.naver.com/helloworld/0239818- [TOAST UI] 번들러
https://ui.toast.com/fe-guide/ko_BUNDLER#webpack-%EC%86%8C%EA%B0%9C