Module bundler란 무엇인가요?
빌드 도구
- 빌드에 필요한 여러가지 과정을 자동화하는 도구
- 현대의 모듈 번들러들은 빌드 도구의 역할까지 수행하고 있습니다.
모듈 번들러란?
- 의존성이 있는 여러개의 JS파일을 하나의 JS파일로 합쳐주는 도구
- 번들러 설정에 따라서 CSS나 이미지 파일 같은 것도 같이 취급할 수 있습니다.
왜 탄생하게 되었나요?
초기 모듈
- 초기 모듈은 HTML에서 JS를 순서대로 로드하는 방식이었습니다.
<html>
<script src="module1.js" /> // var name = '도밥'
<script src="module2.js" /> // var name = '우코'
<script src="module3.js" />
</html>
// module3.js
function hello(){
console.log('hi' + name) // hi 우코
}- 모듈 간 스코프 구분이 x, 모듈 로드 순서를 지정하는 데 많은 시간 소모
CommonJS
- 모듈 간 스코프가 분리되었고, 직관적인 문법으로 많은 사랑을 받게되었습니다.
- 하지만 commonjs는 브라우저외의 환경에서 작동하도록 만들어진 모듈 시스템이었습니다.
- 비동기 모듈 로드에 대한 부분은 고려되지 않았기 때문에 브라우저에서 사용하기 어려웠습니다.
AMD(Asynchronous Module Definition)
- 비동기 모듈 로드 지원
- 시간이 지나면서 CommonJS와 AMD 사이에서 호환성 문제가 발생
- UMD: 둘 다 호환되게 분기 처리한 것
ESM(ES6 Module)
- 자바스크립트 표준 모듈 시스템
- 하지만 아직도 각각의 모듈을 개별 http 요청으로 가져와야 했고, 통신 횟수가 증가했습니다. => 초기 로딩 속도 저하
- 개발자들은 이러한 모듈을 하나로 합치는 방법을 생각하게됩니다.
Bundler
무슨 기능이 있나요?
Dev server
- HMR(Hot Module Replacement): 코드의 변경사항을 새로고침 없이 반영시켜주는 기술
추가적인 처리를 지원
- Babel과 같은 트랜스파일러를 연결해서 번들링 과정에서 실행
- minify: 코드 경량화
- Tree Shaking: 사용하지 않는 코드를 제거하고 번들링하는 것
어떻게 사용하나요? (Webpack)
webpack.config.js
- webpack 관련 설정을 하는 파일
const path = require('path'); // node.js API
module.exports = {
entry: './src/index.js' // 번들링할 모듈의 시작점을 지정
output: { // 번들 파일 저장 경로
filename: 'index.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.css$/,
// 로더는 역순으로 실행된다.
use: ['style-lodaer', 'css-lodaer']
}
]
},
plugins: [new HtmlWebpackPlugin()] // 번들 파일 관련 후처리
// html 파일을 생성해서 번들링된 파일을 자동으로 주입
}번들링
// index.js
import text from './text.js';
import './index.css';
document.body.innerHTML = `<h1>${text}</h1>`;- index.js는 2개의 파일에 의존하고 있는데요. 번들링하면 output 속성에 설정한 경로에 맞게 잘 생성되고 index.js에 css관련 속성들으 포함되어서 번들링됩니다.
마무리
이번 글에서는 번들러에 대한 내용을 다뤘는데요. 프론트엔드를 처음 공부할 때 webpack을 통해서 vue 프로젝트를 처음부터 구성해본 적이 있는데요. 그때 생각이 많이 났습니다. 사실 내용이 생각보다 가벼워서 제가 기대했던 내용과는 살짝 달랐지만 모듈러의 탄생 과정은 흥미로웠습니다. 빠른 시일내에 번들러를 추가적으로 공부해야겠네요. 아직 부족한 점이 참 많은 거 같습니다.
Reference
흑우 모르는 흑우 없제~