> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/webpack/webpack/config-webpack-dev-environment/integration-webpack.md).

# Webpack 통합

## 소스 디렉토리 구성 <a href="#config-source-directory" id="config-source-directory"></a>

&#x20;프로젝트 디렉토리에 소스(source, `src`) 디렉토리를 만든 후, [모듈 관리(웹)](/webpack/web-modules/manage-legacy-modules.md)에서만 만들었던 모듈 파일을 추가합니다.

{% tabs %}
{% tab title="디렉토리 구조" %}

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

{% endtab %}
{% endtabs %}

## Webpack CLI

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

{% tabs %}
{% tab title="webpack 명령어 실행" %}

```bash
# 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
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
[번들링 모드(mode)](/webpack/webpack/config-webpack-dev-environment/webpack-mode.md)를 명령어로 설정하려면 다음과 같이 입력하고 실행합니다.

```bash
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
```

{% endhint %}

모듈 번들링 결과물은 기본적으로 자동 생성된 배포([distribute](https://dic.daum.net/word/view.do?wordid=ekw000048531), `dist`) 디렉토리 안에 만들어 집니다.

{% code title="dist/main.js" %}

```javascript
!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)}()}();
```

{% endcode %}

## 번들링 된 파일 로드 <a href="#loading-bundled-file" id="loading-bundled-file"></a>

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

{% tabs %}
{% tab title="index.html" %}

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

{% endtab %}
{% endtabs %}

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

![](/files/-MTdKG2ByqHoy1NXEEok)

## 참고 <a href="#reference" id="reference"></a>

{% embed url="<https://webpack.js.org/guides/getting-started/#creating-a-bundle>" %}
번들(Bundle) 생성
{% endembed %}