webpack打包HTML文件

打包HTML

下载安装html打包插件

对于 webpack4
npm i html-webpack-plugin -D 
现在下载默认都 webpack5
cnpm install -save-dev html-webpack-plugin@5.0.0-alpha.9

配置文件里

const {resolve} = require('path'); // node插件，获取目录信息的
// 引入webpack
const htmlPack = require('html-webpack-plugin');
module.exports = {
    // entry: "./src/index.js", // 设置webpack的入口entry
    /* 多个入口也可以设置成对象，这种方式打包后按照属性生成多个chunk，输出多个bundel */
    entry: {
        /* 可以设置多个入口,打包后生成一个chunk,输出一个bundel */
        onea: ['./src/index.js', './src/app.js'],
        two: './src/demo.js',
        // index: './src/index.html'
    },
    mode: "development", // 设置完直接执行命令 webpack 会自动选用dev模式
    output: {
        // 设定目录
        filename: "[name].js",
        path: resolve(__dirname,"build"),
    },
    
    
    /* 翻译器的设置 */
    module: {
        rules: [
            // css img 等文件处理的规则
        ]
    },
    
    
    /* 插件的使用 */
    plugins:[
        // webpack的loader做不了的任务，可以配合plugin去完成
        
        /* HTML打包的插件使用 */
        // 引用html打包插件，默认会创建一个空的html，自动引入打包资源
        new htmlPack({
            // 开发者也可以指定在哪个HTML文件上添加要打包的内容
            template: "./src/index.html",
            // 在output的指定目录里创建该命名的文件
            filename: "res.html",
            // 选择该HTML文件加载哪个js，顺序从右到左
            chunks:["index","common"],
            // 压缩
            minify: {
                collapseWhitespace: true, // 去除空格(谨慎使用)
                removeComments: true // 移除注释
            }
        }),
    ]
}

如果要打包多个html，要new多个html打包器，配置如下:

/* 如果打包多个html，每个都要单独压缩 */
        new htmlPack({
            // 指定在哪个HTML文件上添加要打包的内容
            template: "./src/index.html",
            // 在output的指定目录里创建该命名的文件
            filename: "res.html",
            // 选择该HTML文件加载哪个js，顺序从右到左
            chunks:["index","common"],
            // 压缩
            minify: {
                collapseWhitespace: true, // 去除空格
                removeComments: true // 移除注释
            }
        }),
        new htmlPack({
            // 指定在哪个HTML文件上添加要打包的内容
            template: "./src/copy1.html",
            // 在output的指定目录里创建该命名的文件
            filename: "res1.html",
            // 选择该HTML文件加载哪个js，顺序从右到左
            chunks: ['common','copy1'],
            // 压缩
            minify: {
                collapseWhitespace: true, // 去除空格
                removeComments: true // 移除注释
            }
        }),