Webpack에서 HTML 레이아웃 생성

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

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

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

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

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