빌드 (Build)
개요
- 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업입니다.
번들링 (Bundling)
개요
- 사전적 의미 : 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위
- 프론트엔드에서의 의미 : 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음
웹팩 (Webpack)
개요
- 애플리케이션 배포를 위해 가장 많이 사용하는 번들러입니다.
- 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러입니다.
- HTML, CSS, JavScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구 입니다. (다양한 파일을 번들링 합니다)
- 가장 큰 장점으로 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 제공해줍니다.
- 유저에게 로딩속도와 성능은 큰 의미가 있습니다.
모듈 번들러의 등장 이유
- 모던 웹이 발전하면서 JavaScript 코드의 양이 절대적으로 많이 증가했고 대규모의 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장하므로써 세분화된 모듈 파일이 폭발적으로 증가했습니다.
- 이런 복잡성에 대응하기 위해 하나의 시작점으로부터 의존성 가지는 모듈을 모두 추적하여 하나의 결과물을 만들어내는 모듈 번들러가 등장하게 되었습니다.
웹팩 파해치기
웹팩 예시 코드
module.exports = {
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: 인스턴스를 통해 재정의할 수 있습니다.
참조 : 코드스테이츠 프론트엔드 부트캠프
Aim for the TOP, Developer