프로젝트를 진행하며 CRA(Create-React-App)이 업데이트 되어 dotenv 가 내장된 것을 모르고 라이브러리를 설치해 사용하려다 충돌이 난 적이 있는데, 당시에 받았던 에러 메시지는 다음과 같았다.
v5 used to include polyfills for node.js core modules by default react-scripts 5 webpack Module not found: Error: Can't resolve 'fs’
결과적으로는 해결하긴 했지만, 그동안 있다는 걸 알기만 하고 지나갔던 webpack이 무엇인지 궁금증이 생겨 알아보게 되었다.
먼저 공식문서를 통해 webpack을 찾아본 결과,
webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 입니다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다.
공식문서에 의하면 webpack은 정적 모듈 번들러이다. 정적 모듈 번들러는 무엇일까?
먼저 모듈이란, 코드를 구성하는 논리적인 단위로서, JS에서는 코드를 여러 파일로 나누고, 각 파일에서 필요한 클래스, 함수, 변수 등을 정의하고 다른 파일에서 필요한 모듈을 불러와 사용할 수 있도록 하는 것을 의미한다.
이러한 외부에 있는 모듈이 ‘필요해서 불러오는’ 경우 의존성이 생긴다.
모듈 시스템에는 크게 require()문으로 대표되는 CommonJS 방식과 import 문으로 대표되는 ES6 방식이 있다.
var $ = require('jquery');
var _ = require('lodash');
function privateFn() {};
function publicFn() {};
module.exports = {
publicFn: publicFn
};
// lib.js
export function sayHello() {
console.log('Hello');
}
// index.js
import {sayHello as hi} from './lib';
hi(); // Hello
번들러란 의존성이 있는 모듈 코드를 하나 또는 여러 개의 파일로 묶어(Bundle)주는 도구, 또는 소프트웨어이다.
브라우저에서 CommonJS나 ES6 모듈로 작성된 코드들은 바로 실행이 안되므로(크롬 같이 지원하는 브라우저가 있다고도 한다) 모듈 코드를 브라우저에서도 잘 실행될 수 있도록 가공해주는 것이 번들러의 역할이다.