Webpack 기초

BaeSeong-min·2025년 1월 21일

프론트엔드 지식

목록 보기

9/9

📁Webpack이란?

📂모듈이란?

자바스크립트로 개발을 하다보면 코드의 재사용이나 유지보수 측면에서 파일을 여러개로 분리해서 개발하곤 한다. 이때, 분리된 파일을 모듈이라고 한다.

필요한 어떤 곳에서든 언제든지 사용가능 하기 때문에, 자주 사용하는 코드는 모듈로 분리해서 개발한다.

웹 애플리케이션이 만들어지면 웹 서버에 배포를 한다. 사용자가 브라우저를 통해 웹사이트에 접근을 하면, 브라우저는 사용자에게 UI를 보여주기 위해서 웹 서버에 html, css, JavaScript와 같은 자원을 요청한다. 그리고, 웹 서버는 준비된 자원을 브라우저에게 응답함으로써, 사용자는 UI를 볼 수 있게 된다.

개발 편의성을 위해 모듈을 많이 분리하다 보면 브라우저에서 웹 서버에 요청하는 컨텐츠(파일)의 개수가 많아진다. 이에 따른 네트워크 비용의 증가는 페이지 로딩 시간을 길어지게 함으로써 사용자 경험에 좋지 않은 영향을 끼친다.

📂번들링 및 모듈 번들러

개발을 할 때는 모듈로 나눠서 개발을 하고, 웹 서버에 배포하기 전에 여러 개의 모듈을 하나의 파일로 묶어서 배포한다.

이는 브라우저에서 웹 서버로 요청하는 파일의 개수를 줄이기 때문에 사용자 경험을 향상시킬 수 있다.

여러개의 모듈을 하나의 모듈로 묶는 작업: 번들링
여러개의 모듈을 하나의 모듈로 묶어주는 도구: 모듈 번들러

Webpack은 프론트엔드에서 가장 인기있는 모듈 번들러이다.

Webpack은 기본적으로 JavaScript 모듈을 번들링하는 도구이지만, 로더(loader)를 사용하면 html, css, 이미지(.jpg, .png)와 같은 정적 자원도 각각 번들링될 수 있다. 이미지 파일은 이미지 파일대로 번들링 되는 것처럼 말이다.

📁Webpack 이전의 모습

🔽 index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="./src/index.js"></script>
</head>
<body>
</body>
</html>

🔽 ./src/index.js

import anumber from './a.js';
import bnumber from './b.js';
import cnumber from './c.js';

console.log(anumber);
console.log(bnumber);
console.log(cnumber);

🔽 ./src/a.js

import number1 from './a-1.js'
import number2 from './a-2.js'

var number = 10;

export default number + number1 + number2;

index.js 모듈이 a.js, b.js, c.js 모듈을 가져온다.
이때, a.js 모듈은 a-1.js와 a-2.js 하위 모듈을 가져와 사용한다.

따라서, 브라우저는 프로젝트에서 사용되는 모듈을 웹 서버로 요청을 한다.

브라우저가 웹 서버에 각각의 모듈을 요청하고 받아오는데까지 시간이 걸리기 때문에, 웹 서버로의 모듈 요청이 많아질수록 비효율적이다.

번들링을 하면 여러 개의 파일을 하나로 묶을 뿐만 아니라 압축 및 최적화도 함께 이루어진다. 따라서, 여러 개의 컨텐츠를 하나의 컨텐츠로 가져옴으로써 브라우저에서 웹 서버로의 요청 개수가 줄고, 가져오는 컨텐츠의 파일 크기가 작아지며, 캐싱이 최적화되기 때문에 전체적으로 웹사이트 로딩 속도가 빨라진다.

개발자 도구에서 특정 모듈을 클릭한 후에 나타나는 Timing 탭은 브라우저가 웹 서버로 데이터를 요청한 시점부터 브라우저가 데이터를 받아오는데까지 걸린 총 시간을 보여준다.

a.js 모듈의 경우, 가져오는데 5.31ms가 소요됨을 확인할 수 있다.

📁Webpack 설치 및 실습

📂모듈 다운

🔽webpack, webpack-cli 모듈 다운

npm install --save-dev webpack webpack-cli

webpack 패키지는 운영환경에 배포되지 않기 때문에 devDependencies에 추가 되도록 --save-dev 옵션을 적용한다.

📂Webpack에서 제공하는 CLI 실행하기

Webpack은 기본적으로 CLI를 통해서 기능을 제공하는 라이브러리이다.
로컬환경에 설치된 webpack과 같은 CLI를 실행하기 위해서는 npx 명령어를 사용해야 한다.

🗂️production 모드 적용

npx webpack --entry ./src/index.js --output-path ./dist

--entry는 webpack의 진입점으로 어떠한 파일을 기준으로 번들링할 것인지를 지정한다.

번들링된 파일에는 index.js 파일뿐만 아니라, index.js 파일에서 import한 모든 모듈과 그 하위 모듈까지 포함된다.

--output-path는 번들링한 파일을 어떤 경로에 위치시킬지 지정한다.
따라서, 번들링힌 파일은 ./dist 디렉토리에 위치한다.

번들링이 완료된 main.js 파일은 지정해준 dist 디렉토리에 위치한다.

번들링을 할 때 production 모드를 적용하면, 번들링된 모듈은 일반적으로 실제 서비스에 배포하기 위해 만들어진 것이다. 따라서 최적화된 상태로 main.js파일이 생성된다.

🗂️development 모드 적용

npx webpack --entry ./src/index.js --output-path ./dist --mode development

--mode development를 지정해주면, 개발만을 위해 만들어진 번들링 파일이기 때문에 압축없이 번들링 파일이 생성된다.

📂예제 코드

🔽index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="./dist/main.js"></script>
</head>
<body>
</body>
</html>

🔽./dist/main.js

(()=>{"use strict";console.log(110),console.log(20)})();

🔽./src/index.js

import anumber from './a.js';
import bnumber from './b.js';

console.log(anumber);
console.log(bnumber);

🔽./src/a.js

import number1 from './a-1.js'

var number = 10;

export default number + number1 + number2;

🔽./src/b.js

var number = 20;

export default number;

🔽./src/a-1.js

var number = 100;

export default number;

index.html에서 번들링된 모듈 main.js를 가져온다.

main.js 번들링 파일은 index.js 파일을 기준으로 번들링 되었기에 main.js파일을 가져오면 index.js파일이 실행되는 것과 동일한 결과를 보여준다.

개발자도구에서 네트워크 탭을 보면, 전과는 다르게 브라우저는 웹 서버에 main.js 모듈 하나만을 요청하고 있다. 그럼에도, 번들링되기 전과 동일하게 기능이 동작한다.

번들링하지 않고 자바스크립트 파일을 웹 브라우저에서 실행시키면, 브라우저는 총 7개의 요청을 하고 컨텐츠를 가져오는데까지 75ms의 시간이 소요된다.

번들링한 파일을 웹 브라우저에서 실행시키면, 번들링된 하나의 파일만 요청하면 되기에 7개의 요청에서 4개의 요청으로 줄어든다. 그리고, 컨텐츠를 가져오는데까지 42ms로 거의 절반이 줄어든다.

간단한 모듈만으로 실습했기에 사소해 보일 수 있으나, 실제 운영 환경에서는 엄청난 차이가 있다.

📝 번들링한 파일을 웹 브라우저에서 실행시킨다는 말은, 웹 브라우저 엔진이 HTML 문서를 읽으면서 <script> 태그를 만났을 때를 의미한다. 브라우저 엔진은 HTML 문서에서 <script> 태그를 만나면 해당 JavaScript 파일을 요청하고 실행한다.

📂환경설정 파일로 Webpack 적용하기

Webpack 라이브러리를 실행할 때, 자동으로 webpack.config.js 파일을 참고해서 번들링 작업을 진행한다.

📝Webpack 라이브러리를 실행한다는 말은 일반적으로 Webpack 라이브러리에서 제공하는 webpack이라는 CLI를 npx 명령어로 실행하는 것을 의미한다.

📝npx는 Webpack을 전역적으로 설치하지 않고도 Webpack 라이브러리에서 제공하는 CLI를 어디에서든 간에 실행할 수 있도록 해 주는 명령어이다.

🔽webpack.config.js

const path = require('path');

module.exports = {
  mode: 'production', // development
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

webpack.config.js 파일에서 번들링 작업을 하는 소스 코드는 webpack 사이트를 참고하면 된다.

entry: 진입점을 지정하는 속성이다. 즉, 어떠한 파일을 기준으로 번들링할지를 지정한다.
output: 번들링 파일이 위치할 파일 경로와 파일명을 지정하는 속성이다.
mode: production 혹은 development를 지정한다.
하나로 묶어서 만든 모듈이 서비스 배포 목적이라면 압축 및 최적화를 시켜줄 수 있도록 production으로 설정한다. 만약, 번들링 모듈이 개발만을 위한 목적이라면 압축을 하지 않고 개발 편의성에 집중해서 번들링 모듈을 만들 수 있도록 development를 지정한다.