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

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

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

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

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

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

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

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