번들링🗃
: 여러 제품이나 코드, 프로그램을 묶어 패키지로 제공하는 행위
- 번들: 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음
번들링의 필요성
Webpack📦
: 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러
- 모듈 번들러: HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구
모듈 번들러의 등장
Webpack에서의 모듈
빌드와 번들링
Webpack의 필요성
babel-loader
, vue-loader
, scss-loader
등 다양한 로더 사용 가능babel-loader
: JavaScript ES6의 문법들을 ES5로 변환vue-loader
: Vue 컴포넌트를 일반적인 자바스크립트 모듈로 변환sass-loader
: sass/scss파일을 css 파일로 컴파일🏷 Target
: Webpack은 다양한 환경과 target을 컴파일한다
target의 기본값: web
Browser Compatibility(브라우저 호환성)와 연관된 속성
예시
module.exports = {
target: ["web", "es5"],
};
🏷 Entry(엔트리)
: Webpack에서 entry는 개발자가 작성한 코드의 시작점으로 Entry point라고도 한다
entry의 기본값: ./src/index.js
webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용
webpack은 이를 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있음
예시
//기본 값
module.exports = {
...
entry: "./src/index.js",
};
//지정 값
module.exports = {
...
entry: "./src/script.js",
};
🏷 Output(출력)
: 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 수행한다
기본 출력 파일: ./dist/main.js 폴더로 설정
생성된 기타 파일: ./dist 폴더로 설정로 설정
path
속성 사용 시 path
모듈을 사용해야 함
예시
const path = require('path');
module.exports = {
...
output: {
path: path.resolve(__dirname, "docs"), // 절대 경로로 설정
filename: "app.bundle.js",
clean: true
},
};
🏷 Loader(로더)
: loader 사용 시 Webpack이 JavaScript와 JSON 파일 외에도 다른 유형의 파일을 처리하거나, 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가할 수 있다
test
: 변환이 필요한 파일들을 식별하기 위한 속성use
: 변환을 수행하는데 사용되는 로더를 가리키는 속성exclude
: 바벨로 컴파일하지 않을 파일이나 폴더를 지정test
와 use
속성 필수module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
exclude: /node_modules/,
},
],
},
};
🏷 Plugins(플러그인)
: plugins 사용 시 번들 최적화나 에셋 관리, 환경변수 주입 등 광범위한 작업을 수행할 수 있다
플러그인 사용 시 require()
로 플러그인 우선 요청 후 plugins 배열에 사용하고자 하는 플러그인 추가
new
연산자를 사용해 플러그인의 인스턴스를 만들어주어야 함
플러그인 예시
html-webpack-plugin
: 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성mini-css-extract-plugin
: CSS를 별도의 파일로 추출해 CSS를 포함하는 JS 파일 당 CSS 파일을 작성해주도록 지원예시
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html"),
}),
new MiniCssExtractPlugin(),
],
};
🏷 Optimization(최적화)
: 버전4부터 Webpack은 선택한 항목에 따라 최적화를 실행한다
minimize
: bundle 파일을 최소화(=압축)시키는 작업 여부를 결정minimizer
: defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의 가능module.exports = {
...
optimization: {
minimizer: [
new CssMinimizerPlugin(),
]
}
};
왜 리액트가 번들링이 필요할까❓
: 가벼운 라이브러리로 인기를 얻은 리액트
→ 시간이 지나며 개발자들의 다양한 니즈를 충족시키기 위해 추가적인 라이브러리 설치는 불가피
→ 이러한 라이브러리들을 번들링할 수 있는 웹팩의 필요성이 증가
리액트 개발에 필수적인 라이브러리
import
와 같은 구문을 해석(css관련)하고 적용할 수 있도록 하는 로더 리액트 개발에 도움이 되는 라이브러리
<오늘의 일기>
웹팩으로 번들링하고 깃헙 페이지를 통해 배포까지 해봤던 Unit3. 처음에는 하나하나 이해하고 넘어가려다 보니 어렵게 느껴졌었는데 직접 적용을 해보면서 점차 번들링하는 과정의 큰 흐름을 볼 수 있게 되었다.
요즘 들어 미래의 내가 진짜 개발자가 되어있을까라는 생각이 자주 든다. 막연한 불안감 때문인 것 같은데 이럴 때일수록 불안감은 뒤로 제쳐 두고 지금 나에게 주어진 것들을 열심히 임해서 불안감을 줄여봐야겠다!