Webpackでのカスタムレイアウトファイル

実際には、通常すでにサイトの独自のHTMLレイアウトを持っています。この場合、Webpackが自動生成するものではなく、私たちのレイアウトを使用する必要があります。どのように行うか見てみましょう。

以下のレイアウトがあるとします：

src/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My layout</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>My layout</title>
    
    <script defer src="main.js"></script>
  </head>
  <body>
    
  </body>
</html>