빌드 (Build)
개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업
번들링 (Bundling)
사전적 의미 : 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위
프론트엔드에서의 의미 : 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음
웹팩 (Webpack)
애플리케이션 배포를 위해 가장 많이 사용하는 번들러
여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러
HTML, CSS, JavScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구 입니다. (다양한 파일을 번들링)
가장 큰 장점으로 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 제공
유저에게 로딩속도와 성능은 큰 의미가 있다.
모듈 번들러의 등장 이유
모던 웹이 발전하면서 JavaScript 코드의 양이 절대적으로 많이 증가했고 대규모의 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장하므로써 세분화된 모듈 파일이 폭발적으로 증가했다.
이런 복잡성에 대응하기 위해 하나의 시작점으로부터 의존성 가지는 모듈을 모두 추적하여 하나의 결과물을 만들어내는 모듈 번들러가 등장하게 되었다.
웹팩 예시 코드
target: ["web", "es5"],
entry: "./src/script.js",
output: {
path: path.resolve(__dirname, "docs"),
filename: "app.bundle.js",
clean: true
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html"),
}),
new MiniCssExtractPlugin(),
],
optimization: {
minimizer: [
new CssMinimizerPlugin(),
]
}
};Target
웹팩은 다양한 환경과 target 을 컴파일한다.
기본 값은 "web" 이고 esX("es5") 를 넣으면 지정된 ECMAScript 버전으로 컴파일 할 수 있다.
Entry
프론트엔드 개발자가 작성한 코드의 시작점 으로 이해할 수 있다.
웹팩은 해당 시작점 을 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있다.
기본 값은 "./src/index.js 이고 다른 혹은 여러 Entry Point 를 지정할 수 있다.
Output
내보낼 위취와 이 파일의 이름을 지정하는 방법을 웹팩에 알려주는 역할을 한다.
Loader
웹팩은 기본적으로 JavScript 와 JSON 파일만 이해한다.
그러나 Loader 를 사요ㅛㅇ하면 다른 유형의 파일을 처리하거나, 유효한 모듈로 변환해 애플리케이션에 사용할 수 있다.
Loader 의 속성
- test : 변환이 필요한 파일들을 식별하기 위한 속성 (필수)
- use : 변환을 수행하는데 사용되는 로더를 가리키는 속성 (필수)
- exclude : 바벨로 컴파일하지 않을 파일이나 폴더를 지정하는 속성
- include : exclude 와 반대로 반드시 컴파일해야 할 파일이나 폴더 지정하는 속성
Plugins
번들을 최적화하거나 에셋을 관리하고 환경 변수 주입 등의 광범위한 작업을 수행할 수 있다.
먼저 Plugins 배열에 사용하는 플러그인을 추가해야 한다.
new 키워드를 사용해 호출하여 플로그인의 인스턴스를 만들어줘야 한다.
Optimization
최적화하기 위한 다양한 옵션
Optimization 의 속성
minimize : 명시된 Plugins 로 Bundle 파일을 최소화(=압축) 시키는 작업 여부를 결정한다.
minimizer : 인스턴스를 통해 재정의할 수 있다.
참조 : 코드스테이츠 프론트엔드 부트캠프
