Webpack에서 나만의 레이아웃 파일 사용하기

실제로는 보통 우리만의 사이트 HTML 레이아웃이 이미 있습니다. 이 경우 Webpack이 자체적으로 생성하는 것이 아니라 우리의 레이아웃을 사용하도록 해야 합니다. 어떻게 하는지 살펴보겠습니다.

다음과 같은 레이아웃이 있다고 가정해 봅시다:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>나의 레이아웃</title>
	</head>
	<body>
		
	</body>
</html>

Webpack이 우리의 레이아웃을 사용하도록 만들겠습니다. 이를 위해 다음 설정에 지정합니다:

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

결과적으로 빌드 후 dist 폴더에는 우리의 레이아웃이 들어 있고, 그 안에는 모든 번들이 자동으로 연결됩니다:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>나의 레이아웃</title>
		
		<script defer src="main.js"></script>
	</head>
	<body>
		
	</body>
</html>

나만의 레이아웃을 만드세요. Webpack을 당신의 레이아웃을 사용하도록 설정하세요.