📚1. Webpack에 관하여
웹 개발을 하는 과정 중에서 시간이 흘러 프로젝트 규모가 점점 커질수록 모듈 관리, 의존성 문제, 코드 최적화등의 필요성이 존재하게 됩니다. 이러한 문제들을 최종적으로 해결하기 위해 만들어진 라이브러리가 바로 Webpack(웹 팩)입니다.
📚 2. Webpack 이란?
Webpack은 모듈 번들러(Module Bundler)로 여러 개의 자바스크립트 파일과 그에 필요한 리소스(CSS, 이미지 등)를 하나의 파일 또는 몇 개의 파일로 묶어주는 도구로 모듈화 된 코드를 브라우저에 효율적으로 실행하도록 도와주는 라이브러리입니다. 현대 웹 개발에 필수적으로 사용되는 번들링, 코드 변환, 최적화도구입니다.
📚 3. Webpack의 필요성
Webpack(웹 팩)은 단순히 HTML과 JS, CSS를 하나로 묶어주는 역할을 한다고만 생각할 수 있으나 실제 프로젝트에서는 다음과 같은 이유로 Webpack이 필요합니다.
- 모듈 관리와 의존성 해결
- 현시점을 기준으로 Javascript는 import/export를 활용한 모듈화가 기본으로 구성
- Webpack에서는 모든 모듈과 라이브러리 의존성을 분석하고 하나의 번들로 묶어줌
- 코드 변환 및 호환성 확보
- 최신 ES6+ 버전 이상을 사용하면 구형 브라우저에서는 작동되지 않을 가능성이 있음
- Webpack과 Babel을 함께 사용하면 최신 문법을 자동으로 변환하여 구형 브라우저에도 실행 가능
- 파일 최적화 및 번들링
- JS, CSS 이미지 파일들을 압축(minify)하고 하나 또는 몇 개의 번들로 묶어줌
- 이로 인해 HTTP의 요청 수 감소 -> 로딩 속도 개선
- 개발 편의성 부분
- Webpack Dev Server를 사용하여 Hot Module Replacement(HMR)을 직접적으로 활용해 즉시 브라우저에 반영할 수 있음
- 환경별 설정(개발/배포)을 쉽게 구분할 수 있음
- 유지보수성 및 확장성
- 프로젝트를 대규모화할 경우 파일과 모듈이 많아짐
- 이를 통해 Webpack은 구조화된 번들링과 모듈 관리를 통해 코드 유지보수를 쉽게 만들어줌
💡 정리: Webpack은 단순히 파일만을 묶는 도구가 ❌, 모듈 관리, 코드 변환, 최적화, 개발 편의성까지 한 번에 제공하는 현대 웹 개발 필수 도구임
📚 4. Webpack 설정과 초기 설정
먼저 Nodejs + Express로 Node웹을 세팅하고 Webpack을 적용 해보겠습니다.
mkdir node-webpack-bloging
cd node-webpack-bloging
code . // vsCode로 열기
npm init -ynode-webpack-bloging/
├─ src/
| ├─ index.js
| └─ server.js
├─ dist/
├─ package.json
├─ webpack.config.js- index.js -> 브라우저용 JS
- server.js -> Node.js웹 서버 (Express)
🐧 패키지 설치하기
다음은 명령어로 Node 기본 웹 서버 패키지를 설치해줍니다.
npm install express
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env- express -> Node.js 웹 서버
- webpack + babel -> 모듈 번들링 + 최신 JS 문법 지원
🐧 Webpack 설정
// webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js", // 브라우저 시작점
output: {
filename: "bundle.js", // Bundle JS
path: path.resolve(__dirname, "dist"), // 웹팩 결과물 위치 저장
},
mode: "development",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // node_modules는 제외
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
};- Node 웹 서버는 Webpack 번들이 필요 없으나 클라이언트 JS를 위해 번들링용으로 설정함
🐧 서버 코드 작성하기
// src/server.js
const express = require("express");
const path = require("path");
require("dotenv").config();
const app = express();
const PORT = process.env.SERVER_PORT;
// 정적 파일 세팅
app.use(express.static(path.join(__dirname, "../dist")));
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "../index.html"));
});
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}`);
});🐧 클라이언트 JS 작성
// src/index.js
console.log("Hello Node + Webpack!");// index.html (프로젝트 루트)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Node Webpack!</title>
</head>
<body>
<h1>Webpack Node Test Example</h1>
<script src="./dist/bundle.js"></script>
</body>
</html>
🐧 번들링 & 서버 실행
이제 모든 세팅이 완료되었다면 npx 명령어로 웹팩 번들링과 서버를 실행합니다.
📚 번들링:
npx webpack- dist/bundle.js 파일 생성
📚 서버 실행:
node src/server.js- 브라우저 접속: http://localhost:3000
- "Hello Webpack!" 텍스트가 보이면 성공
GitHub - Koras02/node-webpack-bloging
Contribute to Koras02/node-webpack-bloging development by creating an account on GitHub.
github.com