03- webpack打包html资源

1. 下载安装plugin包
   npm i html-webpack-plugin -D
2. 引入插件
   const HtmlWebpackPlugin = require('html-webpack-plugin');
3. 使用插件

const {resolve} = require("path")   //从path中接收resolve方法
const htmlWebpackPlugin = require("html-webpack-plugin")      //引入html打包插
module.exports={
    entry: "./src/js/index.js",
    output: {
        path: resolve(__dirname, "./build"),    //输出路径
        filename: "build.js"    //输出文件名，只单个入口文件，则可设具体文件名
    },
    mode: "development",       //webpack使用相应的模式配置
    module: {                  //css打包规则
        rules: []
    },
    plugins: [
        //默认创建一个空的html，目的就是自动引入打包的资源js/css
        new htmlWebpackPlugin({              //引用插件
            template: "./src/index.html",           //index.html不用加script，也可以自动引入js文件
            filename: "index.html",           //输出的打包的文件名
            //压缩html代码
            //JS代码只需设置成生产模式（production）模式，会自动压缩
            minify: {
	            // 移除空格
	            collapseWhitespace: true,
	            ///移除注释
	            removeComments: true
			}
        })
}

4. 目录结构
   
   打包过后的html资源
   
5. webpack打包多个html资源
   多html的规律是需要有多个entry，每个html一个entry，同时需要新建多个HtmlWebpackPlugin
   

//打包完，是三个js文件，分别是vendor.js、index.js、cart.js
entry: {
        vendor: ["./src/js/jq.js","./src/js/common.js"],
        index: "./src/js/index.js",
        cart: "./src/js/chart.js"
    },
output: {
        path: resolve(__dirname, "./build"),    //输出路径
        filename: "[name].js"       //输出文件名，这里不能是具体的名称
    },

plugins: [
        //默认创建一个空的html，目的就是自动引入打包的资源js/css
        new htmlWebpackPlugin({              //引用插件
            template: "./src/index.html",           //index.html不用加script，也可以自动引入js文件
            filename: "index.html",           //输出的打包的文件名
            chunks: ['index','vendor'],      该html所需的js文件
            // 压缩html代码
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注释
                removeComments: true

            }
        }),
        new htmlWebpackPlugin({              //引用插件
            template: "./src/chart.html",           //index.html不用加script，也可以自动引入js文件
            filename: "chart.html",           //输出的打包的文件名
            chunks: ['cart','vendor']        //该html所需的js文件
        })
    ]

6. 执行命令 webpack