webpack-005 打包html

// 1.   下载插件 npm i html-webpack-plugin -D
// 2.   引用插件 
const htmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
    // 4.   不打包JS将无法被HTML引入,哪怕已经存在对应chunks
    //      不打包JS不指定chunks，会默认引用main.js并且报错，虽然能压缩HTML
    entry: {
        index: './src/js/index.js',
        common: './src/js/common.js',
        list: ['./src/js/form.js', './src/js/list.js']
    },
    plugins: [
        // 3.   使用插件
        // 默认创建一个空白html用来引入打包后的js文件
        new htmlWebpackPlugin({
            // 指定html模板
            template: './src/index.html',
            // 指定文件名
            filename: 'index.html',
            // 5.   指定JS chunks,就是引入打包好的JS后打包html，不指定将默认引用所有chunks
            chunks: ['index'],
            // 默认压缩 minify:true,
            minify:{
                // 空格
                collapseWhitespace: true,
                // 注释
                removeComments: true
            }
        }),
        // 打包多个html
        new htmlWebpackPlugin({
            template: './src/list.html',
            filename: 'list.html',
            chunks: ['common','list']
        })
    ]
}