💡 번들 (Bundle)
사용자에게 웹 어플리케이션을 제공하기 위한 파일 묶음
애플리케이션이 고도화되고 업데이트를 거듭할 수록, 구성하고 있는 파일의 갯수는 증가할 것이고, 더 복잡해 질 것이다.
이 때, 이런 복잡한 상태의 애플리케이션을 그대로 사용자에게 배포하게 된다면, 사용자는 속도저하와 다양한 버그를 경험하게 될 것이다.
이러한 점을 방지하고자, 구성하고 있는 수많은 파일을 하나의 묶음으로 압축하여 사용자에게 제공하고 있다.
이러한 행위를 번들링이라고 한다.
💡 웹팩 (Webpack)
여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러
📌 모듈 번들러 (Module Bundler)
세분화된 모듈로 인한 복잡성에 대응하기 위해 하나의 시작점으로부터 의존성을 가지는 모듈을 추적하여 하나의 결과물로 만드는 도구
📌 빌드 (Build)
개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업
리액트 앱을 기준으로 npm start build를 하게 되면, index.html파일에 앱이 압축되어 배포에 최적화된 상태를 제공해 준다.
웹펙은 한마디로 번들링을 해주는 도구이다.
웹펙을 사용하는 가장 궁극적인 이유는 빠른 로딩속도와 높은 성능을 위해서이다.
웹페이지를 구성하는 코드의 양이 많을 수록 우리는 '무겁다'라는 표현을 쓰는데, 웹페이지가 무거우면 무거울 수록, 사용자는 느린 로딩속도와 성능저하를 경험하게 된다.
브라우저에서 서버에게 웹페이지에 대한 데이터를 요청할 때, 웹팩이 없다면 그 무거운 코드를 하나하나 제공하게 된다.
그러면 네트워크 코스트가 증가하게 된다.
하지만, 웹펙을 통해 데이터들을 번들링 해준다면 구성하고 있는 많은 파일을 하나로 묶어서 받아올 수 있기 때문에, 네트워크 코스트가 획기적으로 감소하게 된다.
🔍 웹팩의 핵심 개념
const webpack = require('webpack');
// html-webpack-plugin : 생성된 모든 번들을 자동으로 삽입하여 애플리케이션 용 HTML파일 생성
const HtmlWebpackPlugin = require("html-webpack-plugin");
// mini-css-extract-plugin : CSS를 별도의 파일로 추출해 CSS를 포함하는 JS파일 당 CSS파일을 작성해주게끔 지원
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
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
컴파일 될 환경에 대해서 설정한다.
위의 예시코드에서는 web 환경에서 es5버전으로 컴파일 한다는 의미이다.
📌 Entry (Entry Point)
입구 (시작점)
말 그대로 애플리케이션의 시작점이다.
이 Entry Point를 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있다.
📌 Output
생성된 번들의 내보낼 위치와 파일 이름에 대해서 설정한다.
기본 출력 파일의 경우 ./dist/main.js
생성된 기타 파일의 경우 ./dist폴더로 설정된다.
📌 Loaders
Webpack은 기본적으로 JavaScript와 JSON파일만 이해하는데 Loader를 사용하면, 그외 다른 유형의 파일을 처리할 수 있다.
🪄Babel
webpack은 es5 기준으로 빌드가 되는데, es6나 react를 빌드하기 위해서 Babel을 사용한다.
React코드를 webpack에서 읽을 수 있는 es5로 변환해주는 역할을 해준다.
Loader가 가지는 속성은 다음과 같다.
- test : 변환이 필요한 파일들을 식별하기 위한 속성
- use : 변환을 수행하는데 사용되는 로더를 가리키는 속성
- exclude (Optional) : 바벨로 컴파일하지 않은 파일이나 폴더 지정
(반대 : include)
📌 Plugins
번들의 최적화하거나 광범위한 작업을 수행하기 위해서 Plugin을 사용한다.
Plugin을 사용할 때는 반드시 require()을 통해 먼저 요청해야 한다.
그리고 다른 목적으로 Plugin을 여러번 사용할 수 있기 때문에 plugins 배열에 new연산자를 사용해 인스턴스를 만들어줘야 한다.
📌 Browser Compatibility
최적화 (Optimization)
브라우저의 호환성을 위해 최적화하기 위한 다양한 옵션을 설정한다.
-
minimize : TerserPlugin 또는 optimization.minimize에 명시된 plugin 으로 bundle파일을 압축시키는 작업여부를 결정한다.
-
minimizer : default minimizer를 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의할 수 있다.
