빌드 결과 자동 주입
HTML 자동 주입 플러그인
HtmlWebpackPlugin 플러그인은 빌드(컴파일, 번들링 등) 된 파일 이름에 해시가 포함된 경우 유용합니다. html-webpack-plugin 패키지를 프로젝트에 설치한 후, Webpack 구성 파일을 열어 플러그인을 설정합니다.
npm i html-webpack-plugin -D
번들 된 결과물이 출력된 화면입니다.

해시가 포함된 파일 이름이 생성된 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', // 주 언어 명시
},
}),
생성 된 index.html
문서 코드는 다음과 같이 출력됩니다.

참고
Last updated
Was this helpful?