Webpack

Bundle

서로 참조관계가 있는 모듈을 모아서 하나의 파일로 묶는 것을 Bundle 이라고 한다. Webpack 은 이렇게 모듈을 모아서 번들링 해주는 역할을 해준다 하여 'Module Bundler' 라고 불린다. Bundle 2개의 js 파일을 bundle.js 라는 하나의 파일로 만들어서 사용 👉 모듈들의 의존성을 안전하게 유지시키면서 하나의 파일로 만드는 과정 const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } } ... Bundle 이 중요한 이유 모든 모듈을 로드하기 위해 검색하는 시간이 단축된다..

모듈(Module)

모듈 정의 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태 Module 사용 시 코드의 재사용성이 증가한다. 코드의 관리가 편해진다. 코드를 모듈화하는 기준이 명확해야 한다. 표준 모듈 모듈을 사용하기 위해서는 모듈을 인식하는 Module system 과 모듈을 다루는 키워드가 제공되어야 한다. Module System CommonJS (Node.js) ESM (ECMAScript 2015~) Module Keywords 가져오기 - 모든 객체를 참조하는 형태 내보내기 - 1. 한 곳으로 내보내기 2. 개별적으로 내보내기 CommonJS 가져오기: require (모듈의 경로) 내보내기: module.exports module.exports = {...} : 내보낼 값들을 한 객체 안에 할..