如何在使用webpack的项目中的dist /文件夹中生成index.html

Question

我的webpack配置如下

var HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  context: path.resolve(__dirname, "examples/src"),
  mode: "development",
  entry: {
    app: "./app.js"
  },
  output: {
    filename: "bundle.js",
    publicPath: "/"
  },
  // output: {
  //   path: path.join(__dirname, "dist"),
  //   filename: "index_bundle.js",
  //   publicPath: "/dist/"
  // },
  devServer: {
    contentBase: path.resolve(__dirname, "examples/src"),
    disableHostCheck: true,
    port: 8000,
    host: "0.0.0.0"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: "url-loader?limit=100000"
      }
    ]
  },
  // plugins: [
  //  // is only working with npm run build
  //  new HtmlWebpackPlugin({
  //   title: '',
  //   // save index.html one director back from the output path
  //   filename:  path.resolve(__dirname, "examples/src/index.html"),
  //   template: 'index.template.ejs',
  //   hash: false
  //  }),
  // ],

  resolve: {
    alias: {
      "react-photo-gallery": path.resolve(__dirname, "src/Gallery")
    }
  }
};

这是我的github存储库的链接-https://github.com/ananddharne/weddingAlbum

如何使用当前设置在dist文件夹中生成index.html文件，以便可以使用Netlify之类的工具进行部署

我知道html webpack插件是一个选项，但是我不知道如何正确使用它，如果有人可以帮助我解决我的问题，那将是非常有用的：）

非常感谢您的帮助！