Module
프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태
분리되어 있는 다른 파일의 코드를 참조해 재사용성을 높힌다.
- 코드의 재사용성이 증가한다
- 코드의 관리가 편해진다
- 코드를 모듈화하는 기준이 명확해진다
모듈의 구조
- CommonJS (Node.js)
+ require(모듈의 경로)- module.exports
- ESM (ECMAScript 2015 ~)
Module Keyword
-
import
+ 한 곳으로 내보내기- 개별적으로 내보내기
-
export
+ 모듈 객체를 참조하는 형태
Module의 종류
- Built-in Core Module (내장된 모듈 ex : Node.js module)
- Community-based Module ( 외부 모듈 ex : NPM )
+ npm CLI를 사용해서 install - Local Module ( 특정 프로젝트에 정의된 모듈)
Bundle
모듈들의 의존성을 안전하게 유지시키면서 하나의 파일로 만드는 과정을 번들링이라 한다.
- 모든 모듈을 로드하기 위해 검색하는 시간 단축
여러 파일을 하나로 합쳐주기 때문에 파일을 읽는 시간과 모듈을 검색이 빨라진다.
- 사용하지 않는 코드를 제거해준다.
모듈 내에서 기능을 내보낼 때 사용하지 않는 기능은 번들링 과정에서 제거된다.
때문에 파일크기가 감소하며 앱이 빨라지는 효과가 있다.
- 파일의 크기를 줄여준다
별도의 파일들을 압축하는 것 보다 번들링을 통해 하나로 압축하는 것이 파일의 크기를 더 줄여준다.
Webpack의 기본구조
웹팩 필수 개념 4가지
- entry
- output
- loader
- plugin
Entry & Output
Entry - 모듈의 의존 관계를 이해하기 위한 시작점을 설정
Output - Webpack이 생성하는 번들 파일에 대한 정보를 설정
package.json을 만드는 명령어인 npm init -y을 실행한다.
package.json
{
"name": "Webpack-tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}npm install webpack webpack-cli --save-dev
웹팩을 실행할 수 있는 명령어를 지원하는 패키지를 설치해준다.
이렇게 node-modules 폴더가 생성됐고 package.json에 devDependencies가 추가됐다.
"devDependencies": {
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
}이제 웹팩 명령어를 실행해서 번들파일을 만들어 보자
src 폴더를 만들어 js 모듈파일들을 넣어주고 dist폴더를 생성한 뒤
npx webpack --target=node 터미널에서 명령어를 입력한다.
dist 폴더에 main.js 파일에 src에 파일들이 번들링되서 하나로 합쳐졌다.
Webpack 설정
Webpack 활용
