webpack
: 여러개의 파일을 하나의 파일로 합쳐주는 번들러
1. webpack 패키지 & 웹팩 터미널 도구 webpack-cli설치
$ npm install -D webpack webpack-cli2. webpack 설정
//webpack.config.js
const path = requre("path")
module.exports = {
mode: "development",
entry : {
main: "./src/app.js",
},
output: {
filename: "[name].js",
path: path.resolve("./dist"),
},
}
--mode: 웹팩 실행 모드를 의미 - webpack에 내장된 환경별 최적화를 활성화할 수 있음/development,production(기본값),none
--entry: webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야하는 모듈
--output: 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할
3. 웹팩 실행을 위한 NPM 커스텀 명령어 추가
//package.json
{
"scripts": {
"build": "./node_modules/.bin/webpack"
}
}⇒ npm run build 웹팩 작업 실행
Loaders (로더)
webpack은 기본적으로 JavaScript와 JSON 파일만 이해하는데
로더를 사용하면 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환하여 애플리케이션에서 사용
로더는 일반적으로 JavaScript함수로 구현되며, 입력 파일을 받아서 변환된 결과를 반환
module.exports = function (source) {
// 변환 로직
return transformedSource;
};
//webpack.config.js
module:{
rule: [{
test: /\.js$/, //.js 확장자로 끝나는 모든 파일
use: [path.resolve('.my_custom_Loader.js')] //방금 만든 로더 적용
}],
}
test:변환이 필요한 파일을 식별하는 속성
use: 변환을 수행하는데 사용되는 로더를 가리키는 속성
자주 사용하는 로더
1. css-loader : css파일을 모듈로 불러와 사용
$ npm install -D css-loader//webpack.config.js
module:{
rule: [{
test: /\.css$/,
use: ["css-loader"],
}],
} ⚠️ 모듈로 변환된 스타일시트는 DOM에 추가되어야만 브라우저가 해석 가능
css-loader로 처리하면 자바스크립트 코드로만 변경되었을 뿐 DOM에 적용되지 않았기 때문에 스타일에 적용되지 않음
2. style-loader : 자바스크립트로 변경된 스타일을 동적으로 DOM에 추가하는 로더
✅ CSS를 번들링하기 위해선 css-loader와 style-loader를 함께 사용해야함
$ npm install -D style-loader//webpack.config.js
module:{
rule: [{
test: /\.css$/,
use: ["style-loader", "css-loader"], //🚨style-loader를 앞에 추가
}],
} 배열로 설정하면 뒤에서부터 앞으로 순서대로 로더가 동작하므로 css-loader -> style-loader 순으로 작동
3. file-loader : 파일을 모듈로 사용하게끔 함
//webpack.config.js
module:{
rule: [{
test: /\.png$/,
loader: "file-loader",
options:{
publicPath: "./dist/", //모듈로 사용할 때 경로 앞에 추가되는 문자열
name: "[name].[ext]?[hash]", //파일명 형식
}],
} 4. url-loader : 이미지를 base64로 인코딩하여 문자열 형태로 소스코드에 넣는 형식
$ npm install -D url-loader//webpack.config.js
module:{
rule: [{
test: /\.(png|jpg|gif|svg)$/,
loader: "url-loader",
options:{
publicPath: "./dist/",
name: "[name].[ext]?[hash]",
limit : 5000 //5kb 미만 - url-loader 적용 5kb 이상 - file-loader
}],
} 아이콘처럼 용량이 작거나 사용빈도가 높은 이미지는 파일 그대로 사용하기 보다는 Data URL Scheeme을 적용하기 위해 url-loader를 사용하면 좋다
Plugins(플러그인)
로더는 특정 유형의 모듈을 변환하는데 사용되지만, 플러그인을 활용하여 번들을 최적화하거나, 에셋을 관리하고, 환경 변수 주입등과 같은 광범위한 작업을 수행 할 수 있음
플러그인은 일반적으로 apply메서드를 구현하는 클래스로 구성
class MyPlugin {
apply(compiler) {
compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
// 플러그인 로직
callback();
});
}
}
자주 사용하는 플러그인
1. BannerPlugin : 빌드된 파일의 최상단에 배너를 추가하는 플러그인
//webpack.config.js
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.BannerPlugin({
banner: `
Build Date: ${new Date().toLocaleString()}
`
})
]2. DefinePlugin : 코드 내에서 특정 변수를 사용하여 환경에 따라 다른 값 설정하는 플러그인
//webpack.config.js
const webpack = require('webpack');
export default {
plugins: [
new webpack.DefinePlugin({}),
]
}→ 빈 객체를 전달해도 기본적으로 넣어주는 값은 노드 환경정보인 process.env.NODE_ENV 인데 웹팩 설정의 mode에 설정한 값이 해당 부분에 들어감
3. HtmlWebpackPlugin : webpack 빌드 결과물로 HTML 파일을 생성하는 플러그인
자동으로 빌드된 JavaScript 및 CSS 파일을 포함하는 HTML 파일을 생성하여, 수동으로 HTML 파일을 관리할 필요를 줄여줌
$ npm install -D html-webpack-plugin//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 템플릿 경로를 지정
templateParameters: { // 템플릿에 주입할 파라매터 변수 지정
env: process.env.NODE_ENV === 'development' ? '(개발용)' : '',
},
minify: process.env.NODE_ENV === 'production' ? {
collapseWhitespace: true, // 빈칸 제거
removeComments: true, // 주석 제거
} : false,
})
]
}4. CleanWebpackPlugin : 빌드할 때마다 이전 빌드 결과물을 자동으로 삭제하는 플러그인
$ npm install -D clean-webpack-plugin//webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
plugins: [new CleanWebpackPlugin()],
}5. MiniCssExtractPlugin : css 파일을 별도의 파일로 추출하는데 사용하는 플러그인
$ npm install -D mini-css-extract-plugin//webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
process.env.NODE_ENV === "production"
? MiniCssExtractPlugin.loader // 프로덕션 환경
: "style-loader", // 개발 환경
"css-loader",
],
},
],
},
plugins: [
...(process.env.NODE_ENV === "production"
? [new MiniCssExtractPlugin({ filename: `[name].css` })]
: []),
],
}