Webpack에서 HTML 레이아웃 생성

이전 강의에서 HtmlWebpackPlugin을 설치하고 연결했습니다. 이제 빌드 시 HTML 레이아웃 파일이 자동으로 생성되고, 이 레이아웃에 스크립트와 스타일이 자동으로 연결됩니다.

가장 간단한 경우를 시도해 봅시다. 진입점이 하나 있다고 가정합니다:

export default {
	entry: './src/index.js',
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

결과적으로, 빌드 후 JavaScript는 main.js라는 이름의 번들로 빌드되고, 이 번들은 자동으로 생성된 사이트 레이아웃에 연결됩니다:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Webpack App</title>
		
		<script defer src="main.js"></script>
	</head>
	<body>
		
	</body>
</html>

HtmlWebpackPlugin이 활성화된 상태에서 빌드를 실행하십시오. 레이아웃 파일이 생성되는지 확인하십시오. 그 소스 코드를 검토하십시오. 브라우저에서 파일을 열어보십시오.