> 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/webpack-plugins/automatic-injection-to-html-document.md).

# 빌드 결과 자동 주입

## HTML 자동 주입 플러그인 <a href="#auto-injection-plugin" id="auto-injection-plugin"></a>

HtmlWebpackPlugin 플러그인은 빌드(컴파일, 번들링 등) 된 파일 이름에 [해시](/webpack/webpack/config-webpack-dev-environment/webpack-env-compatibility.md#browser-caching)가 포함된 경우 유용합니다. [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) 패키지를 프로젝트에 설치한 후, Webpack 구성 파일을 열어 플러그인을 설정합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i html-webpack-plugin -D
```

{% endtab %}

{% tab title="webpack.config.js" %}

```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    // 플러그인 인스턴스 생성
    new HtmlWebpackPlugin({
      /** 플러그인 옵션 설정 **/
      // 문서 타이틀
      title: 'Webpack 러닝 가이드',
      // 문서 메타
      meta: {
        // <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        'X-UA-Compatible': {
          'http-equiv': 'X-UA-Compatible',
          'content': 'IE=edge',
        },
        // <meta name="theme-color" content="#4285f4" />
        'theme-color': '#4285f4',
      },
      // 파비콘
      favicon: 'favicon.svg',
    }),
  ]
}
```

{% endtab %}
{% endtabs %}

번들 된 결과물이 출력된 화면입니다.

![](https://1127883942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTbexhuB2p5ev8QaGgg%2F-MToXQTVDl4_H9Fscjxu%2F-MToXsCUG1OaO7lLUE9G%2Fimage.png?alt=media\&token=472ac530-cf84-4814-8ea8-91d5e251f219)

해시가 포함된 파일 이름이 생성된 `index.html` 문서에 성공적으로 포함된 것을 확인할 수 있습니다.

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

```markup
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Webpack 러닝 가이드</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="theme-color" content="#4285f4">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script defer src="main.4c016de27623fbf6e11f.js"></script>
  </head>

  <body>
  </body>

</html>
```

{% endtab %}
{% endtabs %}

## HTML 커스텀 템플릿 <a href="#custom-template" id="custom-template"></a>

기본 생성되는 HTML 템플릿은 일반적인 포멧이라 사용자 입맛에 안 맞을 수 있습니다. 이런 경우 사용자가 직접 템플릿을 제작해 사용하는 것이 좋습니다. HtmlWebpackPlugin이 기본 사용하는 템플릿 엔진은 [EJS](https://ejs.co/) 입니다.

{% tabs %}
{% tab title="webpack.config.js" %}

```javascript
new HtmlWebpackPlugin({
  // 템플릿 설정
  template: './src/template/template.ejs',
  
  // 자동 주입 해제
  inject: false,
  
  // 압축 설정
  minify: true,

  // 문서 메타
  meta: {
    'theme-color': '#4285f4',
    'description': 'Webpack 러닝 가이드 실습을 진행합니다.',
  },

  // 사용자 정의 옵션
  templateParameters: {
    title: 'Webpack 러닝 가이드', // 문서 타이틀
    lang: 'ko-KR',             // 주 언어 명시
  },
}),
```

{% endtab %}

{% tab title="src/template/page.ejs" %}
EJS 템플릿 문서에 전달 된 다음 데이터 값을 연결하여 HTML 문서를 생성합니다.

`lang`, `title`, `htmlWebpackPlugin.tags.headTags`, `htmlWebpackPlugin.tags.bodyTags`&#x20;

```jsx
<!DOCTYPE html>
<%# lang 주 언어 설정 %> 
<html lang="<%= lang %>">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%# title 문서 제목 설정 %> 
    <title><%= title %></title>
    <%# head에 삽입 될 태그(들) 순환 %> 
    <% htmlWebpackPlugin.tags.headTags.forEach((tag, i) => { %>
      <%# meta, link 태그 삽입 %> 
      <%= /(meta|link)\s/.test(tag) ? tag : null %>
    <% }) %>
    <%# head에 삽입 될 태그(들) 순환 %> 
    <% htmlWebpackPlugin.tags.headTags.forEach((tag, i) => { %>
      <%# script 태그 삽입 %> 
      <%= (/script\s/.test(tag) && !/"polyfills\./.test(tag)) ? tag : null %>
    <% }) %>
  </head>
  <body>
    
    <div id="root"></div>
    
    <%# body에 삽입 될 태그(들) %> 
    <%= htmlWebpackPlugin.tags.bodyTags %>
  </body>
</html>
```

{% endtab %}
{% endtabs %}

생성 된 `index.html` 문서 코드는 다음과 같이 출력됩니다.

![](https://1127883942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTbexhuB2p5ev8QaGgg%2F-MToy8jBMlC6x_8luIze%2F-MToyM3nqvkgmT15zHSy%2Fimage.png?alt=media\&token=4a6336b4-3e95-48c4-bf32-e9a982d780d9)

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

{% embed url="<https://webpack.js.org/plugins/html-webpack-plugin/#root>" %}

{% embed url="<https://github.com/jantimon/html-webpack-plugin/blob/master/examples/template-parameters/readme.md>" %}

{% embed url="<https://ejs.co/>" %}