번들링이란?
프론트엔드 개발자에게 번들은 “사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음"을 의미한다. 사용자가 브라우저를 열고 주소를 입력하면, 개발자가 번들링한 여러 파일을 받는데, 파일을 브라우저가 실행하여 웹 애플리케이션을 사용자에게 제공하게 된다.
번들링을 사용해야 하는 이유?
코드의 용량을 줄이기 위해서 이다. 코드의 용량을 줄이는 과정에서 일어날수 있는 오류들에 대처할수 있게 해준다.
웹팩이란?
여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러다. 모듈 번들러는 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다. Webpack에서의 모듈은 JavaScript의 모듈뿐만 아니라 HTML, CSS, 또는 .jpg나 .png 같은 이미지 파일들도 포함한다.
웹팩을 사용하는 이유?
코드가 무거워지는것을 막아 로딩속도 저하를 막고 최적화 하기 위해서 사용함. Webpack이 없다면 각 자원들을 일일히 서버에 요청해 얻어와야 하지만, Webpack이 있다면 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있기 때문에 네트워크 코스트가 획기적으로 줄어들게 된다.
빌드와 번들링
빌드는 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업을 말한다. React를 기준으로 build를 실행하면 React build 작업이 진행되고, index.html 파일에 압축되어 배포에 최적화된 상태를 제공해준다.
번들링은 파일을 묶는 작업 그 자체를 말하고 파일은 의존적 관계에 있는 파일들(import, export) 그 자체 혹은 내부적으로 포함 되어 있는 모듈을 의미한다. 정확히 말하면 모듈 간의 의존성 관계를 파악해 그룹화 하는 작업이다.
웹팩의 핵심 개념
웹팩 공식문서에서는 아래 항목을 핵심 개념으로 제안하고 있다. 아래 개념에 대해서 제대로 이해하면, 웹팩의 작동 원리에 대해서 더 쉽게 이해할 수 있다.
Entry, Output, Loaders, Plugins ,Mode ,Browser Compatibility
//웹팩의 config파일 예시
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(),
]
}
};Entry
webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈로 엔트리 포인트는 웹팩이 번들링을 시작할 메인 파일이다. 기본 값은 ./src/index.js이지만 위 예시처럼 따로 지정도 가능하다.
Output
Output 속성은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 한다.
Loaders
Webpack은 기본적으로 JavaScript와 JSON 파일만 이해한다 그러나 loader를 사용하면 다른 유형의 파일을 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가할 수 있다.
test: 변환이 필요한 파일들을 식별하기 위한 속성
use: 변환을 수행하는데 사용되는 로더를 가리키는 속성
exclude: 바벨로 컴파일하지 않을 파일이나 폴더를 지정. (반대로 include 속성을 이용해 반드시 컴파일해야 할 파일이나 폴더
Plugins
플러그인은 번들을 최적화하거나 asset을 관리하고 환경 변수 주입 등과 같은 작업을 수행한다. 플러그인을 사용하기 위해서는 require()를 통해 플러그인을 먼저 요청해야하고 plugins 배열에 사용하고자 하는 플러그인을 추가해야 한다.
Mode
웹팩에 내장된 환경별 최적화를 활성화할 수 있다.
모드 옵션의 값으로 development production none을 선택할 수 있다.
