# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/webpack/webpack/config-webpack-dev-environment/integration-webpack.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.