webpack logo

Getting Started

애플리케이션에 맞춤형 빌드 파이프라인이 필요하다면 webpack은 좋은 선택입니다. JavaScript 모듈 번들링, 애셋 처리, 로더와 플러그인 통합, 환경별 출력 구성까지 세밀하게 제어할 수 있습니다. 스크립트가 한두 개뿐인 아주 작은 페이지라면 처음에는 번들러가 필요 없을 수도 있지만, 공통 의존성, npm 패키지, 애셋, 프로덕션 빌드가 포함된 애플리케이션이라면 webpack이 전체 조립 과정을 명시적으로 제어할 수 있게 해줍니다.

Webpack은 JavaScript 모듈을 효율적으로 컴파일하는 데 사용됩니다. 설치가 완료되면 CLI 또는 API를 사용하여 webpack과 상호 작용할 수 있습니다. Webpack을 처음 사용하시는 분이라면 핵심 개념과 이 비교를 읽어보시고, 커뮤니티에 나와 있는 다른 도구들보다 webpack을 사용하는 이유를 알아보세요.

Quick Start (Minimal Working Example)

Webpack 프로젝트를 빠르게 구축하고 실행하고 싶다면 create-webpack-app으로 스캐폴딩하는 것이 가장 쉬운 방법입니다.

npx create-webpack-app webpack-demo
cd webpack-demo

Basic Setup

먼저 디렉터리를 생성합니다. 그 다음 npm을 초기화하고, webpack을 로컬로 설치한 후 webpack-cli(커맨드-라인에서 webpack을 실행할 때 사용되는 도구)를 설치합니다.

# Run the commands for one package manager only.

mkdir webpack-demo
cd webpack-demo

# npm
npm init -y
npm install webpack webpack-cli --save-dev

# yarn
yarn init -y
yarn add webpack webpack-cli --dev

# pnpm
pnpm init
pnpm add webpack webpack-cli -D

가이드 전반에 걸쳐 diff 블록을 사용하여 디렉터리, 파일 코드의 변경을 보여줍니다. 예를 들면,

+ 이것은 코드에 복사할 새로운 라인 입니다.
- 그리고 이것은 코드에서 삭제될 라인 입니다.
  그리고 이것은 손대지 말아야 할 라인 입니다.

이제 다음의 디렉터리 구조와 파일, 콘텐츠를 생성합니다.

project

  webpack-demo
  ├── package.json
  ├── package-lock.json
+ ├── index.html
+ └── src/
+    └── index.js

src/index.js

function component() {
  const element = document.createElement("div");

  // 이 라인이 동작하려면 현재 스크립트를 통해 포함된 Lodash가 필요합니다.
  element.innerHTML = _.join(["Hello", "webpack"], " ");

  return element;
}

document.body.appendChild(component());

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.17.21"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

또한 package.json 파일을 수정해 패키지를 private으로 표시하고 main 항목을 제거해야 합니다. 이렇게 하면 코드가 실수로 배포되는 일을 방지할 수 있습니다.

그리고 "type": "module"도 추가해 Node.js가 이 프로젝트의 .js 파일을 ES 모듈로 처리하도록 합니다. 이 설정은 이후의 Node.js 스크립트와 webpack 설정 파일까지 프로젝트 전반에 적용됩니다. Node의 기본 CommonJS 동작을 유지하고 싶다면 "type": "module"을 생략하고, 이 가이드 뒤쪽의 설정은 import와 export default 대신 require(...)와 module.exports로 작성하면 됩니다.

package.json

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "private": true,
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "webpack": "^5.105.0",
     "webpack-cli": "^7.0.0"
   }
 }

이 예시에서는 <script> 태그 사이에 암시적인 의존성이 있습니다. index.js 파일은 실행되기 전에 페이지에 lodash가 포함되어 있어야 합니다. 즉 전역 변수 _에 암묵적으로 의존하게 되므로, 스크립트 실행 순서가 중요해지고 유지보수도 어려워집니다.

이러한 방식으로 JavaScript 프로젝트를 관리하는 것은 문제가 있습니다.

  • 해당 스크립트가 외부 라이브러리에 의존한다는 것이 명확하지 않습니다.
  • 의존성을 잃어버렸거나 잘못된 순서로 포함되었으면 애플리케이션이 제대로 작동하지 않습니다.
  • 의존성이 포함되었지만 사용되지 않는 경우에도 브라우저는 필요 없는 코드를 강제로 다운로드합니다.

Webpack은 의존성을 명시적으로 선언하고 함께 번들링함으로써 이러한 문제를 해결합니다. 덕분에 전역 변수에 의존하지 않아도 되고, 스크립트도 올바른 순서로 실행되도록 보장할 수 있습니다.

Creating a Bundle

먼저 디렉터리 구조를 약간 수정하여 "배포" 코드(./dist)를 "소스" 코드(./src)와 분리합니다. "소스" 코드는 우리가 작성하고 편집하는 코드입니다. "배포" 코드는 빌드 과정을 통해 최소화하고 최적화되어 궁극적으로 브라우저에서 로드될 출력물 입니다. 다음과 같이 디렉터리 구조를 변경합니다.

project

  webpack-demo
   ├── package.json
   ├── package-lock.json
+  ├── /dist
+  │   └── index.html
-  ├── index.html
   └── /src
       └── index.js

dist 디렉터리는 빌드 결과물이 놓이는 곳이므로, 실제 프로젝트에서는 보통 그 안의 파일을 직접 수정하지 않습니다. 여기서는 브라우저가 첫 번째 번들을 불러올 수 있도록 임시 발판 역할로 index.html을 dist로 옮겨 두는 것입니다. 이후 다른 가이드에서는 index.html을 수동으로 수정하지 않고 자동 생성하게 됩니다. 그 단계까지 가면 dist 디렉터리를 비우고 내부 파일을 모두 다시 생성해도 안전합니다.

lodash의 의존성을 index.js와 함께 번들링 하려면, 라이브러리를 로컬에서 설치해야 합니다.

# Run the command for one package manager only.

# npm
npm install lodash

# yarn
yarn add lodash

# pnpm
pnpm add lodash

지금부터 스크립트로 lodash를 가져오겠습니다.

src/index.js

+import _ from 'lodash';
+
 function component() {
   const element = document.createElement('div');

-  // 이 라인이 동작하려면 현재 스크립트를 통해 포함된 Lodash가 필요합니다.
+  // 이제 Lodash를 스크립트로 가져왔습니다.
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());

이제 스크립트로 번들링 할 것이므로 index.html을 업데이트해야 합니다. 현재 import한 lodash <script>를 삭제하고 원래의 ./src 파일 대신 다른 <script> 태그로 번들을 로드하도록 수정합니다.

dist/index.html

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.17.21"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
 </html>

이 설정에서 index.js는 명시적으로 lodash가 있어야 하며, 이것을 _에 바인딩합니다.(전역 스코프의 오염 없음) 모듈에 필요한 의존성을 명시함으로써 webpack은 이 정보를 사용하여 디펜던시 그래프를 만들 수 있습니다. 그런 다음 그래프를 사용하여 스크립트가 올바른 순서로 실행되는 최적화된 번들을 생성합니다.

자, 그럼 프로젝트 루트 디렉토리에서 npx webpack 명령어를 실행해 보겠습니다. webpack이 로컬에 설치되어 있다면 npx는 node_modules/.bin에 있는 바이너리를 실행하고, 그렇지 않다면 다운로드하여 실행할 수 있습니다. 이 명령어는 src/index.js에 있는 스크립트를 진입점으로 사용하여 dist/main.js를 출력으로 생성합니다.

# Run the command for one package manager only.

# npm
npx webpack

# yarn
yarn webpack

# pnpm
pnpm exec webpack

[webpack-cli] Compilation finished
asset main.js 69.3 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.x.x compiled successfully in 1851 ms

브라우저에서 dist 디렉터리의 index.html을 열어보세요. 모든 것이 제대로 되었다면 'Hello webpack' 텍스트가 표시될 것입니다.

Modules

import 문과 export 문은 ES2015에서 표준화되었습니다. 현재 대부분의 브라우저가 이를 지원하지만, 새 문법을 인식하지 못하는 브라우저도 일부 존재합니다. 그래도 걱정할 필요는 없습니다. webpack이 기본적으로 이를 지원합니다.

내부적으로 webpack은 모듈 그래프를 분석한 뒤, 브라우저가 올바른 순서로 로드할 수 있는 코드로 모듈을 번들링합니다. import와 export 같은 모듈 문법을 처리하며, 그 외 다양한 모듈 문법도 지원합니다. 자세한 내용은 Module API를 참고하세요.

webpack은 import와 export 문 이외는 코드를 변경하지 않습니다. 다른 ES2015 기능을 사용한다면 webpack의 로더 시스템인 Babel을 트랜스파일러로 사용해야 합니다.

Using a Configuration

버전 4부터 webpack은 어떠한 설정도 필요하지 않습니다. 하지만 대부분의 프로젝트는 좀 더 복잡한 설정이 필요하므로 webpack에서 설정 파일을 제공합니다. 이것은 터미널에서 많은 명령어를 수동으로 입력하는 것보다 훨씬 효율적입니다. 다음과 같이 생성해 보겠습니다.

Webpack 설정 파일은 CommonJS 또는 ECMAScript 모듈 방식으로 작성할 수 있습니다. 아래 예제에서는 최신 ESM 문법을 사용합니다.

project

  webpack-demo
   ├── package.json
   ├── package-lock.json
+  ├── webpack.config.js
   ├── /dist
   │   └── index.html
   └── /src
       └── index.js

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

// import.meta.dirname을 기본적으로 지원하지 않는 Node.js 버전에서는,
// import.meta.url에서 __dirname을 파생합니다.
// (Node 20.11 이상 버전에서는 import.meta.dirname과 import.meta.filename을 지원합니다.)
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
};

이제 새로운 설정 파일을 이용하여 다시 빌드를 실행해 보세요.

# Run the command for one package manager only.

# npm
npx webpack --config webpack.config.js

# yarn
yarn webpack --config webpack.config.js

# pnpm
pnpm exec webpack --config webpack.config.js

[webpack-cli] Compilation finished
asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.x.x compiled successfully in 1934 ms

설정 파일은 단순한 CLI 사용보다 훨씬 많은 유연성을 제공합니다. 로더의 규칙, 플러그인, 해석 옵션 및 기타 여러 향상된 기능을 지정할 수 있습니다. 더 자세한 것은 설정 문서를 참고하세요.

NPM Scripts

CLI에서 webpack의 로컬 사본을 실행하기 위해 약간의 단축 명령어를 설정 할 수 있습니다. npm script를 추가하여 package.json을 수정해 보겠습니다.

package.json

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "webpack": "^5.105.0",
     "webpack-cli": "^7.0.0"
   },
   "dependencies": {
     "lodash": "^4.17.21"
   }
 }

이제 이전에 사용한 npx 명령 대신 npm run build 명령을 사용할 수 있습니다. scripts에서는 npx와 동일한 방식으로 로컬에서 설치된 npm 패키지를 이름으로 참조할 수 있습니다. 이 규칙은 모든 컨트리뷰터가 동일한 공통의 스크립트 세트를 사용할 수 있도록 하므로 대부분의 npm 기반 프로젝트에서 표준입니다.

이제 다음 명령을 실행하고 스크립트의 별칭이 작동하는지 확인하세요.

# Run the command for one package manager only.

# npm
npm run build

# yarn
yarn build

# pnpm
pnpm run build
...

[webpack-cli] Compilation finished
asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.x.x compiled successfully in 1940 ms

Conclusion

이제 기본적인 빌드를 완료했으니 다음 가이드인 Asset Management로 넘어가 웹팩을 사용하여 이미지와 폰트 같은 자산을 관리하는 방법을 배우세요. 이 시점에서 프로젝트는 다음과 같아야 합니다.

project

webpack-demo
 ├── package.json
 ├── package-lock.json
 ├── webpack.config.js
 ├── /dist
 │   ├── main.js
 │   └── index.html
 ├── /src
 │   └── index.js
 └── /node_modules

Webpack 디자인에 대해 자세히 알아보고 싶으면 basic concepts과 configuration 페이지를 확인하세요. 또한 API에서 webpack이 제공하는 다양한 인터페이스를 자세히 살펴봅니다.

Edit this page·
« Previous
Guides
Next »
Asset Management

25 Contributors

bebrawcntanglijunchrisVillanuevajohnstewsimon04aaronangTheDutchCodersudarsangpVanguard90chenxsanEugeneHlushkoATGardnerayvarotbjarkiztomaszeSpiral90210byzykwizardofhogwartsmyshovanshumanvd3lmsnitin315Etheryenzowiebeha

Translators

limong limong