简介：之前我们打包css，js等资源之后，需要自己新建html去引入打包之后的文件，而使用了这个插件之后，就可以避免这些操作，它自动加载所有的打包资源。

html-webpack-plugin

生成html文件，并在html中加载所有的打包资源

安装

npm i html-webpack-plugin -D

配置<这里只配置常用的配置>（ html-webpack-plugin）

const { resolve } = require('path');
// css独立打包
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// html打包
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',

    entry: "./src/index.js",

    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'main.js'
    },

    module: {
        rules: [{
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }

        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:'css/[name].css'
        }),
        new HtmlWebpackPlugin({
            title: 'product_list',  // 输出html的title
            filename: 'main.html', // 输出html文件名称
            template:'./index.html', //  指定输出html模板
            meta:{ //输出html的一个meta
                viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'
            }
        })
    ]

}

目录