빌드 결과 자동 주입

Last updated 4 years ago

Was this helpful?

빌드 결과 자동 주입

HTML 자동 주입 플러그인

HtmlWebpackPlugin 플러그인은 빌드(컴파일, 번들링 등) 된 파일 이름에 가 포함된 경우 유용합니다. 패키지를 프로젝트에 설치한 후, Webpack 구성 파일을 열어 플러그인을 설정합니다.

npm i html-webpack-plugin -D

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',
    }),
  ]
}

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

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

<!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>

HTML 커스텀 템플릿

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

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

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

EJS 템플릿 문서에 전달 된 다음 데이터 값을 연결하여 HTML 문서를 생성합니다.

lang, title, htmlWebpackPlugin.tags.headTags, htmlWebpackPlugin.tags.bodyTags

<!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>

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

참고

Previous빌드 결과 자동 정리 NextCSS 파일 개별 추출

Last updated 4 years ago

Was this helpful?

HTML 자동 주입 플러그인

npm i html-webpack-plugin -D

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',
    }),
  ]
}

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

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

<!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>

HTML 커스텀 템플릿

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

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

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

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

EJS 템플릿 문서에 전달 된 다음 데이터 값을 연결하여 HTML 문서를 생성합니다.

lang, title, htmlWebpackPlugin.tags.headTags, htmlWebpackPlugin.tags.bodyTags

<!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>

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

참고

HtmlWebpackPlugin | webpackwebpack

html-webpack-plugin/readme.md at main · jantimon/html-webpack-pluginGitHub

EJS -- Embedded JavaScript templates