After webpack is packaged, the CSS style is not referenced.

my project directory structure

.
 dist
  index.html
  main.bundle.js
 node_modules
 package-lock.json
 package.json
 src
  css
   style.css
  index.html
  js
      main.js
 webpack.config.js

src index.html files

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Webpack DEMO</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <h1 class="title">Webpack DEMO</h1>

  <script src="./js/main.js"></script>
</body>
</html>

src style.css files

*{margin:0;padding:0;}
html, body {
  height:100%;
}
body {
  background-color:-sharp000;
}
.title {
  display:inline-block;
  margin:30px;
  line-height:1.5;
  font-size:36px;
  color:-sharpFFF;
}

webpack.config.js the contents of the file are as follows

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry:"./src/js/main.js",
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test:/\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          "style-loader",
           "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin("dist"),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      hash: true
    }),
    new MiniCssExtractPlugin({
      filename: "./dist/[name].[hash].css"
    })
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "src"),
    hot: true,
    inline:true
  },
};

generate index.html files

in the dist directory after packaging.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="main.bundle.js?66b744cd3fcfe1839a99"></script></body>
</html>

Why is the style referenced in the original page missing after packaging?

what I want is that after each package, like the JS script, the style is automatically introduced with hash . How can this be achieved?