Webpack 통합

소스 디렉토리 구성

프로젝트 디렉토리에 소스(source, src) 디렉토리를 만든 후, 모듈 관리(웹)에서만 만들었던 모듈 파일을 추가합니다.

디렉토리 구조

.
├── src/
│   ├── modules/
│   │   ├── DOM.js
│   │   └── LOGGER.js
│   └── index.js
├── index.html
├── node_modules/
├── package-lock.json
└── package.json

Webpack CLI

Webpack 명령어를 사용해 프로젝트의 엔트리 파일을 찾아 모듈 번들링을 수행하는 명령을 실행해봅니다.

webpack 명령어 실행

# Webpack 실행 명령어
npx webpack                       

# Webpack 번들링 결과 출력
asset main.js 1020 bytes [emitted] [minimized] (name: main)
orphan modules 2.35 KiB [orphan] 2 modules
./src/index.js + 2 modules 2.89 KiB [built] [code generated]

# 구성 중에 발생한 "경고"
WARNING in configuration
# 'mode' 옵션이 설정되지 않았습니다. Webpack은 이 값을 'production'으로 재설정합니다.
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
# 각 환경(개발, 배포)의 기본 값을 사용하려면 'mode' 옵션을 'development' 또는 'production'으로 설정합니다.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
# 기본 동작을 사용하지 않도록 설정하려면 이 옵션을 'none'으로 설정할 수도 있습니다. 
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.22.0 compiled with 1 warning in 195 ms

번들링 모드(mode)를 명령어로 설정하려면 다음과 같이 입력하고 실행합니다.

npx webpack --mode=development # 개발 모드로 모듈 번들링

# Webpack 번들링 결과 출력
asset main.js 8.24 KiB [emitted] (name: main)
runtime modules 695 bytes 3 modules
cacheable modules 2.89 KiB
  ./src/index.js 562 bytes [built] [code generated]
  ./src/modules/LOGGER.js 742 bytes [built] [code generated]
  ./src/modules/DOM.js 1.62 KiB [built] [code generated]
  
webpack 5.22.0 compiled successfully in 87 ms

모듈 번들링 결과물은 기본적으로 자동 생성된 배포(distribute, dist) 디렉토리 안에 만들어 집니다.

dist/main.js

!function(){"use strict";const e=((e,n=document)=>n.querySelector(e))("#root");var n;n=((e,n,...t)=>{const r=document.createElement(e);if(n||(n={}),"string"==typeof n.children&&(n.children=[n.children]),t){"string"==typeof t&&(t=[chlidren]);const[e]=t;Array.isArray(e)?n.children=[...e]:n.children=n.children??[],n.children=[...n.children,...t]}for(let[e,t]of Object.entries(n))if("children"!==e)if(e.includes("on")){const n=e.replace("on","").toLowerCase();r.addEventListener(n,t)}else"className"===e&&(e="class"),r.setAttribute(e,t);else t.map((e=>{"string"==typeof e&&(r.innerText=r.innerText+e),1===e.nodeType&&r.appendChild(e)}));return r})("h1",{className:"headline"},"ES Moduels를 사용하면 웹 브라우저 환경에서도 의존성 모듈 관리가 수월합니다."),e.append(n),function(e,n="\n    color: #1db6b6;\n    font-weight: bold;\n  "){!function(e,n){console.log(`%c${e}`,n)}("GOOD! ES Moduels를 사용하면 웹 브라우저 환경에서도 의존성 모듈 관리가 수월합니다.",n)}()}();

번들링 된 파일 로드

번들링 된 파일(dist/main.js)을 index.html 파일에서 불러오도록 코드를 추가합니다.

index.html

<script src="./dist/main.js"></script>

웹 브라우저에 서버를 띄운 후, 개발 도구의 Network 패널을 확인하면 모듈 코드가 병합된 main.js 파일이 정상적으로 불러와진 것을 확인할 수 있습니다.

참고

Getting Started | webpackwebpack

번들(Bundle) 생성