Webpack의 개념 및 사용 방법
Webpack의 개념 및 사용 방법에 대해 설명하는 페이지입니다.
Tags
JavaScript, TypeScript, JSX, Webpack, Babel
1. 개요
이번 글에서는 Webpack의 개념 및 사용 방법에 대해 설명하겠습니다. 또한 Webpack과 babel-loader를 사용하여 TSX 파일을 트랜스파일링하는 방법도 설명하겠습니다.
2. Webpack이란?
웹팩(Webpack)이란 모듈 번들러(Module Bundler)로, 여러 개의 파일을 하나 또는 소수의 파일로 병합해주는 도구입니다.
주로 웹 애플리케이션 개발에서 자바스크립트 파일, CSS 파일, 이미지 파일 등을 효율적으로 관리하고 최적화하는 데 사용합니다.
일반적으로 웹 사이트에 접속했을 때 여러 개의 파일을 다운로드할 때 시간이 오래 걸리게 됩니다. Webpack을 사용하면 여러 파일을 하나의 파일로 번들링해주므로 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다.
3. Webpack의 주요 개념
Webpack을 사용하기 위해서, 먼저 다음과 같은 Webpack의 주요 개념들에 대해 알아야 합니다.
3.1. Entry (진입점)
진입점(Entry)이란 웹 애플리케이션이 시작되는 파일을 의미합니다.
Webpack은 이 진입점 파일을 기준으로 의존성 그래프를 만들어서 해당 진입점 파일이 의존하는 모든 모듈을 번들로 묶습니다.
일반적으로 src/index.js 파일을 진입점으로 많이 사용합니다.
1module.exports = {
2 entry: "./src/index.js",
3};3.2. Output (출력)
출력(Output)은 Webpack이 번들링 후 결과물을 저장할 위치를 정의합니다. 일반적으로 dist 폴더를 사용하며, 파일 이름과 경로를 설정할 수 있습니다.
1const path = require("path");
2
3module.exports = {
4 output: {
5 filename: "bundle.js",
6 path: path.resolve(__dirname, "dist"),
7 },
8};3.3. Loaders (로더)
Loaders(로더)는 자바스크립트 파일과 JSON 파일을 제외한 다른 유형의 파일을 처리할 때 사용합니다.
기본적으로 Webpack은 자바스크립트 파일과 JSON 파일만 이해하므로,
CSS나 이미지, 폰트 등과 같은 다른 유형의 파일은 Loaders를 통해 처리할 수 있습니다.
Loaders는 파일을 특정 방식으로 변환하여 번들링 과정에 포함할 수 있도록 해줍니다.
상위 수준에서 Loaders는 Webpack 설정에 두 가지 속성을 가집니다.
test
변환이 필요한 파일들의 유형을 지정합니다.use
변환을 수행하는데 사용되는Loaders를 지정합니다.
아래 예시는 babel-loader를 사용하여 ES6 이상의 자바스크립트 코드를 ES5로 변환하는 예시입니다.
1module.exports = {
2 module: {
3 rules: [
4 {
5 test: /\.js$/,
6 use: "babel-loader",
7 excluse: /node_modules/,
8 },
9 ],
10 },
11};3.4. Plugins (플러그인)
로더(Loaders)가 특정 유형의 모듈을 변환하는 데 사용된다면,
플러그인(Plugins)은 번들을 최적화하거나 asset을 관리, 또는 환경 변수 주입 등과 같은 광범위한 작업을 수행할 때 사용합니다.
자주 사용하는 Plugins으로는 다음과 같은 것들이 있습니다.
-
HtmlWebpackPlugin
html-webpack-plugin은 Webpack 빌드 시점에 HTML 파일을 자동으로 생성하여, 생성된 HTML 파일에 번들링된 자바스크립트 파일과 CSS 파일을 자동으로 추가해주는 플러그인입니다.javascript1const HtmlWebpackPlugin = require("html-webpack-plugin"); 2 3module.exports = { 4 plugins: [ 5 new HtmlWebpackPlugin({ 6 title: "Title", 7 }), 8 ], 9}; -
CleanWebpackPlugin
clean-webpack-plugin은 Webpack 빌드 시점에서 이전 빌드 결과물을 자동으로 삭제해주는 플러그인입니다.javascript1const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 2 3module.exports = { 4 plugins: [new CleanWebpackPlugin()], 5}; -
MiniCssExtractPlugin
mini-css-extract-plugin은 Webpack 빌드 시점에서 CSS 파일을 분리하여 추출하는 플러그인입니다. CSS 파일을 별도로 추출하면, 브라우저에서 CSS 파일을 캐시할 수 있어 초기 로딩 속도를 높일 수 있습니다.javascript1const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 2 3module.exports = { 4 module: { 5 rules: [ 6 { 7 test: /\.css$/, 8 use: [MiniCssExtractPlugin.loader, "css-loader"], 9 }, 10 ], 11 }, 12 plugins: [new MiniCssExtractPlugin()], 13};
3.5. Mode (모드)
모드(Mode) 파라미터를 지정하여 Webpack에 내장된 환경별 최적화를 활성화할 수 있습니다. Mode는 다음과 같이 세 가지 모드가 존재합니다.
development
개발용으로 설정할 때 사용하며, 빠른 빌드와 디버깅에 적합합니다. Mode의 디폴트 값에 해당합니다.production
배포용으로 설정할 때 사용하며, 코드 최적화 및 압축에 강점이 있습니다.none
기본 최적화 옵션 설정을 해제합니다.
4. Step 1 - Webpack 패키지 설치하기
먼저 다음 명령어를 입력하여 Webpack 관련 패키지를 설치합니다. (TypeScript는 이미 설정되어 있다고 가정합니다.)
1npm install --save-dev webpack webpack-cli style-loader css-loader babel-loader @babel/core @babel/preset-typescript html-webpack-plugin webpack-dev-server각 패키지에 대해 설명하자면 다음과 같습니다.
webpack
Webpack사용할 때 필수로 설치하는 패키지로,Webpack을 사용하여 웹 애플리케이션의 자원을 의존성 그래프를 통해 모듈화하고, 이를 하나의 번들 파일로 묶어주는 모듈 번들러입니다. 여러 파일을 하나의 번들 파일로 묶어 페이지 로드를 최적화하고, 각종 로더와 플러그인을 통해 코드를 변환하거나 압축할 수 있습니다.webpack-cli
Webpack을 터미널의 명령어로 사용할 수 있게 해주는 패키지입니다.style-loader
Webpack이 CSS 파일을 처리할 때 사용하는 로더 중 하나로, CSS 파일을 웹 페이지의<head>태그에<style>태그로 DOM에 주입해주는 역할을 합니다.css-loader
CSS 파일에서@import나url()과 같은 CSS 파일 간의 의존성을 처리하는 로더입니다. 이를 통해 자바스크립트 파일에서 CSS 파일을 모듈로 사용할 수 있으며, CSS 파일을 하나의 번들 파일로 묶을 수 있습니다.babel-loader
Babel과 Webpack을 연결해주는 로더입니다.@babel/core
Babel을 사용하여 자바스크립트 코드 변환 작업을 처리하는 핵심 패키지입니다. Babel이 자바스크립트 코드를 분석하고, AST(Abstract Syntax Tree)로 변환한 후 이를 변환하는 과정의 중심적인 역할을 합니다.@babel/preset-typescript
Babel이 타입스크립트 코드를 자바스크립트 코드로 변활할 수 있도록 해주는 Babel 프리셋입니다.html-webpack-plugin
html-webpack-plugin은 Webpack 빌드 시점에 HTML 파일을 자동으로 생성하여, 생성된 HTML 파일에 번들링된 자바스크립트 파일과 CSS 파일을 자동으로 추가해주는 플러그인입니다.webpack-dev-server
실시간 리로딩 기능을 제공하는 개발용 서버입니다. Mode가 development일 때 사용됩니다. 일반적으로 규모가 큰 프로젝트라면 빌드를 실행하여 번들링된 파일을 생성할 때 시간이 오래 걸리지만, webpack-dev-server를 사용하면 실제 번들링된 파일을 생성하지 않고 번들링된 결과를 메모리에 저장하기 때문에 빌드 속도가 빠릅니다.
5. Step 2 - webpack.config.js 설정하기
먼저 다음과 같이 webpack.config.js 파일을 생성한 후 webpack 관련 설정을 합니다.
1// webpack.config.js
2
3const path = require("path");
4const HtmlWebpackPlugin = require("html-webpack-plugin");
5
6module.exports = {
7 entry: "./src", // 번들링할 엔트리 파일 또는 디렉토리
8 output: {
9 path: path.resolve(__dirname, "./dist"),
10 filename: "bundle.js", // 번들 파일명
11 },
12 module: {
13 rules: [
14 {
15 test: /\.tsx?$/, // .ts 또는 .tsx 파일에 Babel 적용
16 exclude: /node_modules/,
17 use: {
18 loader: "babel-loader",
19 options: {
20 presets: [
21 ["@babel/preset-typescript", { pragma: "myCreateElement" }],
22 ],
23 },
24 },
25 },
26 {
27 test: /\.css$/, // CSS 파일에 적용
28 use: ["style-loader", "css-loader"],
29 },
30 ],
31 },
32 resolve: {
33 extensions: [".js", ".jsx", ".ts", ".tsx", ".css"], // 확장자를 자동으로 인식
34 },
35 plugins: [
36 new HtmlWebpackPlugin({
37 title: "Webpack Test",
38 }),
39 ],
40 devServer: {
41 static: { directory: path.join(__dirname, "./dist") },
42 hot: true, // 핫 모듈 리로딩 활성화
43 port: 3000, // 서버 포트 번호
44 open: true, // 서버 시작 시 브라우저 열기
45 },
46 mode: "development", // 개발 모드 설정
47};위의 코드는 src 디렉토리를 진입점으로 하고, 웹팩 빌드 시 dist 디렉토리를 생성합니다.
또한 babel-loader를 사용하여 타입스크립트 코드를 자바스크립트 코드로 트랜스파일링합니다.
또한 style-loader와 css-loader를 사용하여 CSS 파일을 번들링하고 있습니다.
주의할 점으로 로더는 오른쪽에서 왼쪽으로 실행되므로 style-loader와 css-loader를 선언하는 순서가 중요합니다.
반드시 ["style-loader", "css-loader"] 순서로 선언되어야 합니다.
또한 HtmlWebpackPlugin을 사용하여 웹팩 빌드 후 HTML 파일이 생성되도록 설정하였으며, 추가적으로 webpack-dev-server를 설정하였습니다.
6. Step 3 - package.json 스크립트 설정하기
Webpack으로 빌드하려면 다음 명령어를 사용하면 됩니다.
1npx webpack또는
1npx webpack --config webpack.config.js개발 서버로 시작하려면 다음 명령어를 입력하면 됩니다.
1npx webpack serve또는
1npx webpack server --config webpack.config.js위의 명령어를 package.json 스크립트로 설정하여 사용할 수 있습니다. 다음과 같이 package.json에서 Webpack과 관련된 스크립트 설정을 합니다.
1{
2 "scripts": {
3 "build": "webpack",
4 "dev": "webpack serve --config webpack.config.js"
5 },
6 "devDependencies": {
7 "@babel/cli": "^7.25.6",
8 "@babel/core": "^7.25.2",
9 "@babel/plugin-transform-arrow-functions": "^7.24.7",
10 "@babel/plugin-transform-template-literals": "^7.24.7",
11 "@babel/preset-react": "^7.24.7"
12 }
13}이후 터미널에서 npm run build, npm run serve를 입력하면 Webpack을 사용할 수 있습니다.