how to create two HTML file and inject different bundle or js using webpack?

I am using webpack as module bundler I need to create two HTML file ( index.html and about.html) I have two entry point and it will create two bundle.js (index.js and about.js). **but I want index.js will insert in index.html and about.js will inject about.html **

here I am trying [1]: https://i.stack.imgur.com/DMh6N.png

https://codesandbox.io/s/musing-pascal-mrm3ce?file=/webpack/webpack.dev.conf.js:76-80

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

function resolve(dir) {
  return path.join(__dirname, "..", dir);
}

module.exports = {
  context: resolve("./"),
  entry: {
    home: resolve("./src/index.js"),
    about: resolve("./src/about.js")
  },
  output: {
    filename: "static/[name].[contenthash].js",
    path: resolve("dist")
  },
  module: {
    rules: []
  },
  resolve: {
    alias: {
      src: resolve("./src")
    }
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "webpack playground",
      filename: "index.html",
      template: "index.html",
      chunks: "all"
    })
  ]
};

https://codesandbox.io/s/musing-pascal-mrm3ce?file=/webpack/webpack.base.conf.js:0-744 
[![enter image description here][1]][1]
```
`

I tried to add two entry points

```
entry: {
    home: resolve("./src/index.js"),
    about: resolve("./src/about.js")
  },
```
it create two bundles.Only concern is how to insert in different HTML . currently both bundle inserted in index.html

here is my code