SEB_24_Webpack

[keyword]

webpack, entry, output, 번들링, loader, plugin

---

번들링 : 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위

Webpack : 현재 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러(22.07), 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러

모듈 번들러 : HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구

---

→ Webpack은 주요 구성 요소인 로더(loader)를 통해 다양한 파일도 번들링 가능

→ 빌드 : 개발 완료된 앱 배포를 위해 하나의 폴더(directory)로 구성하여 준비하는 작업(ex. React앱 기준 npm run build를 하면 React build 작업 진행, index.html 파일에 압축되어 배포에 최적화된 상태 제공)

→ 번들링 : 묶음의 개념 파일을 묶는 작업, 파일은 의존적 관계에 있는 파일들(import, export) 그 자체 혹은 내부적으로 포함되어 있는 모듈을 의미, 모듈간의 의존성 관계를 파악해 그룹화 하는 작업

---

Webpack의 필요성

→ 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서

→ 로딩 속도 개선을 위해 브라우저에서 서버로 요청하는 파일의 숫자를 줄이는 것

→ Webpack 있다면 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있어 네트워크 코스트를 줄일 수 있음

→ Webpack loader 사용하면 일부 브라우저에서 지원이 되지 않는 JS ES6문법을 ES5로 변환 시켜주는 babel-loader를 사용할 수 있게 됨

---

Entry(엔트리)

→ webpack에서 entry는 프론트엔드 개발자가 작성한 코드의 시작점(React 에서 index.js)

→ Webpack은 이 Entry point를 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있음

module.exports = {
	...
	entry: "./src/index.js",
};
// ./src/index.js를 엔트리 값으로 줌, 기본 값

 

Output(출력)

→ Output 속성은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할

const path = require('path');

module.exports = {
	...
	output: {
		path: path.resolve(__dirname, "dist"), // 절대 경로로 설정
		filename: "main.js",
	},
}

 

 

Loader(로더)

→ Webpack은 기본적으로 JS와 JSON 파일만 이해, loader를 사용하면 Webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가 가능 (ex css-loader, style-loader)

use 배열의 뒷부분부터 읽음

css-loader : css 파일 읽기

style-loader : style로 바꾸고 script태그 생성

MiniCssExtractPlugin.loader를 사용하면 css파일 자체를 번들링

module.exports = {
	...
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [MiniCssExtractPlugin.loader, "css-loader"],
				exclude: /node_modules/,
			},
		],
	},
};

loader 속성

✔️ test : 변환이 필요한 파일들을 식별하기 위한 속성

✔️ use: 변환을 수행하는데 사용되는 로더를 가리키는 속성

✔️ exclude: 바벨로 컴파일 하지 않을 파일이나 폴더를 지정.(반대로 include 속성을 이용해 반드시 컴파일 해야 할 파일이나 폴더 지정 가능)

→ test와 use 속성은 필수 속성, 이런 속성을 넣어 규칙을 정하기 위해서는 module.rules 아래에 정의 rules아래에 정의하면 webpack은 경고를 함

 

Plugins(플러그인)

→ Plugins를 사용하면 번들을 최적화하거나 에셋을 관리하고, 환경변수 주입등의 광범위한 작업을 수행

(html-webpack-plugin을 통해 배포할 html을 만들 수 있다.)

const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
	...
	plugins: [
		new HtmlWebpackPlugin({
			template: path.resolve(__dirname, "src", "index.html"),
			}),
	],
}

→ 플러그인을 사용하기 위해서 require()를 통해 플러그인을 먼저 요청

Html의 플러그인에 template 안넣으면 원하는 화면이 안나옴 템플릿이 되는 html문서 넣어주자

---