빌드 결과 자동 주입
HTML 자동 주입 플러그인
HtmlWebpackPlugin 플러그인은 빌드(컴파일, 번들링 등) 된 파일 이름에 해시가 포함된 경우 유용합니다. html-webpack-plugin 패키지를 프로젝트에 설치한 후, Webpack 구성 파일을 열어 플러그인을 설정합니다.
npm i html-webpack-plugin -Dconst 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이 기본 사용하는 템플릿 엔진은 EJS 입니다.
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 문서 코드는 다음과 같이 출력됩니다.
참고
Last updated
Was this helpful?