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