HtmlWebpackPlugin chunks

HtmlWebpackPlugin chunks

HtmlWebpackPlugin 是一个用于生成 HTML 文件的 Webpack 插件，通过配置 chunks 选项，您可以指定要包含在生成的 HTML 文件中的 JavaScript 模块（chunks）。

当您在配置 HtmlWebpackPlugin 时指定 chunks 选项，可以控制哪些 JavaScript 模块会被包含在生成的 HTML 文件中。这对于多页面应用程序或需要动态加载特定模块的场景非常有用。

以下是一个示例配置，展示如何在 HtmlWebpackPlugin 中使用 chunks 选项：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js',
    dashboard: './src/dashboard.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      filename: 'app.html',
      chunks: ['app']
    }),
    new HtmlWebpackPlugin({
      template: 'index.html',
      filename: 'admin.html',
      chunks: ['admin']
    }),
    new HtmlWebpackPlugin({
      template: 'index.html',
      filename: 'dashboard.html',
      chunks: ['dashboard']
    })
  ]
};

在上面的示例中，针对每个 HTML 文件配置了不同的 chunks，以确保每个生成的 HTML 文件只包含特定的 JavaScript 模块。