Penjanaan Layout HTML dalam Webpack

Dalam pelajaran sebelumnya, kami memasang dan menyambungkan HtmlWebpackPlugin. Sekarang semasa pembinaan, fail layout HTML akan dijana secara automatik untuk kami dan dalam layout ini, skrip dan gaya akan disambungkan secara automatik.

Mari kita cuba kes yang paling mudah. Katakan kita mempunyai satu titik kemasukan:

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

Hasilnya, selepas pembinaan, JavaScript kami akan dibina menjadi bundle bernama main.js dan bundle ini akan disambungkan ke layout laman web yang dihasilkan secara automatik:

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>