htmlwebpackplugin

// 引入 HTMLWebpackPlugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist') // 输出目录
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定模板文件
      filename: 'index.html' // 生成的 HTML 文件名
    })
  ]
};

解释说明：

1. 引入插件：首先通过 require 方法引入 HTMLWebpackPlugin。
2. 配置入口文件：entry 指定了 Webpack 打包的入口文件为 ./src/index.js。
3. 配置输出文件：output 配置了打包后的文件名为 bundle.js，并指定了输出目录为 dist 文件夹。
4. 使用插件：在 plugins 数组中实例化 HTMLWebpackPlugin，并通过 template 指定模板文件路径，filename 指定生成的 HTML 文件名。

这个配置会自动生成一个基于指定模板的 HTML 文件，并自动注入打包后的 JavaScript 文件。