Tệp bố cục tùy chỉnh trong Webpack

Trong thực tế, thường chúng ta đã có sẵn bố cục HTML của trang web. Trong trường hợp này, chúng ta cần Webpack lấy bố cục của chúng ta, chứ không phải tạo ra bố cục của riêng nó. Hãy cùng xem cách thực hiện điều này.

Giả sử chúng ta có bố cục sau:

src/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My layout</title>
  </head>
  <body>
    
  </body>
</html>

Hãy buộc Webpack lấy bố cục của chúng ta. Để làm điều này, hãy chỉ định nó trong cấu hình sau:

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

Kết quả là sau khi build, trong thư mục dist sẽ có bố cục của chúng ta và trong đó tất cả các bundle sẽ được tự động kết nối:

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>