使用webpack打包时,如何把css提取成一个独立的文件

在使用webpack对代码进行打包,会将所有代码进行翻译合并压缩到js文件中,生成的页面的style样式镶嵌在html页面中,那如何将css文件单独抽离出来,并将css文件自动引入到html页面中呢?
书写css代码,必能将其引入到js文件中

import './css/main.css'

webpack.config.js文件配置

// 引入mini-css-extract-plugin插件,用来将css文件单独抽离出来
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { resolve } = require('path')
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    module: {
        rules: [
            // 指定多个配置规则
            {
                test: /\.css$/i, 
                use: [
                    // 'style-loader',
                    //将css打包到style标签中
 
                    // 2. 将css打包到独立文件中
                    MiniCssExtractPlugin.loader,
 
                    //1. css-loader将样式文件输出到js中
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
            // 输出的css文件名不变的意思
        })
    ]