프론트엔드 번들러 & Webpack

질문Bot·2025년 3월 27일

webpack

번들

목록 보기

1/2

이번 글에서는 번들링(Bundling) 이 무엇인지, 그리고 왜 필요한지에 대해 정리해보려고 합니다.

다들 프로젝트를 시작하면서 번들링에 대해 고민해 보신 적이 있나요? 아니면 세팅 과정에서 번들링을 접해 보셨을 수도 있고, 이제 막 관심을 가지기 시작했을 수도 있을거라고 생각을 합니다.

이 글은 제가 번들링을 학습하면서 번들링에 대한 내용을 정리해본 글입니다.

💡 모듈 번들링이란?

❓질문❓. 자바스크립트로 개발할 때, 여러분은 어떤 방식으로 코드를 작성하시나요?

유형
1. 하나의 파일로 작성한다.. ex) main.js로 모든 코드를 여기다가 작성한다.
2. 모듈로 분리해서 작성한다. ex) main.js, footer.js, header.js ~ ....js

대부분은 재사용과 유지보수의 편의성 때문에 2번을 선택하실 거라고 생각을 합니다.
이런식으로 기능별로 나눈 개별 파일을 '모듈'이라고 할수 있습니다.

그러면 이제 모듈을 간단하게 알아봤으니 번들링을 한번 알아보겠습니다.

번들링이 필요한 이유

하나의 예시로 설명을 드리겠습니다.

아래처럼 test_1.js, test_2.js, test_3.js 파일을 각각 index.html에서 불러온다고 가정해 보겠습니다.

🗂️ index.html

<script src="./test_1.js"></script>
<script src="./test_2.js"></script>
<script src="./test_3.js"></script>

이 경우, 브라우저는 각 파일을 개별적으로 요청합니다. (총 3번 요청, 파일이 3개이기 때문)
따라서 파일 수가 많아질수록 요청 시간이 늘어나게 됩니다.

아래는 사진을 보면 알수있죠. 각 파일을 로드하는 데 걸리는 시간이 나타납니다.

📌 결론

지금은 모듈이 3개뿐이지만, 프로젝트가 커질수록 로드해야 하는 파일 수도 많아집니다.
그러면 각 모듈을 개별적으로 요청하면 '네트워크 병목 현상'이 발생할 수 있습니다.

그렇다고 하나의 js에서 모든 코드를 작성하면 가독성과 유지보수에 대한 효율성이 너무 떨어지니 좋지 않겠죠?

저희는 혼자 개발하는 개발자가 아니기 때문에 가독성과 유지보수는 항상 고려해야합니다.
그래서 번들링을 통해 파일들을 묶어주고, 이를 통해 파일의 크기를 줄여 로딩 시간 단축을 할수 있습니다.

네트워크 병목 현상이란?

네트워크 병목 현상이란 : 시스템의 성능을 제한 받는 현상입니다.
네트워크에 여러개의 파일이 몰리면서 속도 느려짐 혹은 서버에 많은 사용자로 인한 파일 로딩 불가 현상이 있습니다.

💡 Webpack

대표적인 번들러이죠? Webpack 한번 알아보겠습니다.

npm i -D webpack // (webpack의 본체라고 생각하면 된다)
npm i -D webpack-cli // (webpack의 command line이 포함)

Webpack을 설치하고, 기존 test_1 ~ test_3까지의 환경과 추가로 app.css등을 추가하였습니다.
저희는 Html, css, img, js파일을 웹팩을 통해 번들링하는 설정을 진행해 볼 예정입니다.

🗂️ Webpack.config.js 세팅

webpack 설정 핵심 요소 정리

entry : 모듈의 시작점을 entry, 웹팩은 엔트리와 연결되어 있는 모든 모듈을 번들링한다.
output : 여러개의 모듈을 하나로 만들어서 저장 시킬 위치를 말한다.
loader : Webpack은 기본적으로 JS 파일만 처리할 수 있기 때문에, CSS나 이미지 같은 파일을 다루기 위해서는 loader가 필요합니다.
plugin: 번들링 외의 추가적인 기능을 제공합니다. ex) HTML 생성

🗂️ webpack.config.js

아래 설정을 통해 dist폴더에 js파일을 번들링 한것을 확인할수 있었습니다.

const path = require('path')
const HTMLIFrameElement = require('html-webpack-plugin')

module.exports = {
	mode: 'development',
	entry: {
		main: './src/app.js',
	},

	output: {
		path: path.resolve('./dist'),
		filename: '[name].js',
	},
}

🎨 loader => CSS 처리

webpack은 기본적으로 JS파일을 모듈로 인지하여 처리합니다. 그래서 프론트엔드 개발에 꼭 필요한 CSS 처리 방법을 알아볼려고합니다.

🗂️ webpack.config.js

module: {
		rules: [
			{
				test: /\.css$/,
				use: [ 'css-loader'],
			},
			{
				test: /\.png$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							publicPath: '../dist',
						},
					},
				],
			},
		],
	},

Webpack 설정은 위와 같이 css와 파일을 처리하는 세팅을 진행하였습니다.
이 상태는 dist/main.js에 JS 문자열로 추가는 되어있지만, 브라우저를 실행시키면 css가 적용이 되어있지 않습니다.
아직 브라우저는 모르는 상태이므로 추가 설정을 진행해야합니다!

➕ 추가 설정

npm i -D style-loader // style-loader를 추가

🗂️ webpack.config.js (style-loader추가)

module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader'],
			},
			{
				test: /\.png$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							publicPath: '../dist',
						},
					},
				],
			},
		],
	},

style-loader는 JS 내부에 있는 CSS를 < style > 태그로 만들어 DOM에 동적으로 삽입해줍니다.

이제 브라우저에 추가 된것을 확인할수 있습니다.

🚨 중간 점검

저희는 지금까지 js파일들 처리도 진행하였고, css, img파일까지 진행하였습니다.
마지막으로 HTML 파일을 처리하는것을 해보면 되겠네요!!

Plugin

npm i html-webpack-plugin -D

🗂️ webpack.config.js

const HTMLIFrameElement = require('html-webpack-plugin')

plugins: [
	new HTMLIFrameElement({
		template: './src/index.html',
	}),
],

html plugin을 추가해줍니다.
npm run build 진행
dist/index.html 생성 확인 가능

이제 다 끝났네요! 이제 index.html을 실행 시켜보겠습니다

🗂️ app.js

import { Test1 } from './test_1.js'
import { Test2 } from './test_2.js'
import { Test3 } from './test_3.js'
import './app.css'

window.addEventListener('DOMContentLoaded', () => {
	const el = document.querySelector('#app')
	el.innerHTML = `
        <h1>Test1= ${Test1()}</h1>
        <h1>Test2= ${Test2()}</h1>
        <h1>Test3= ${Test3()}</h1>
    `
})