四、webpack配置生产环境下压缩html文件

当配置成生产环境后，打包的js文件会被压缩，但是html文件默认不会被压缩
需要手动配置
详情：----1---- ----2---- ----3----注释

// webpack 是node写出来的  node的写法
let path = require('path');
// console.log(path.resolve('dist'))
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: {     //开发服务器的配置
        port: 3000,  //端口
        progress: true,  //打包进度条
        contentBase: './dist',    //以这个目录作为静态服务
        open: true,   //打包完成自动打开浏览器
        compress: false   //启用压缩
    },
    //----1----将开发环境更改成生产环境
    mode: 'production',    //模式  默认两种 生产： production 开发： development
    entry: './src/index.js',     //入口
    output: {
        // ----4----比之前加入了hash，这样每次打包就会生成一个新的文件，不会覆盖
        // [hash:8],只展示八位hash值
        filename: 'bundle.[hash:8].js',   //打包后的文件名称
        path: path.resolve(__dirname, 'dist'),  //路径必须是一个绝对路径，需要引入node的自带模块
    },
    plugins: [   //数组  放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html',    //需要放打包文件的html模板路径
            filename: 'index.html',   //打包完成后的这个模板叫什么名字
            minify:{    //----2----配置html压缩
                removeAttributeQuotes:true,     //删除html中的双引号
                collapseWhitespace:true,    //html文件折叠成一行
            },
            hash:true,      //----3----为html文件添加hash戳
        })
    ]
}