webpack 4 html插件：html-webpack-plugin_html-js-css

概述首先说明一下plugin是做什么的，plugin是用来扩展webpack的功能的，所有webpack自身无法实现的功能都可以通过开源的plugin实现。那么如何在webpack中配置plugin呢? plugin接收一个数组，数组的每一项是plugin的一个实例，每个plugin的配置项以参数的形式通过构造函数传递进去。下面要说的html-webpack-plugin是一个使用率非常高的plu

首先说明一下plugin是做什么的，plugin是用来扩展webpack的功能的，所有webpack自身无法实现的功能都可以通过开源的plugin实现。

那么如何在webpack中配置plugin呢? plugin接收一个数组，数组的每一项是plugin的一个实例，每个plugin的配置项以参数的形式通过构造函数传递进去。

下面要说的HTML-webpack-plugin是一个使用率非常高的plugin，它的作用是通过模板生成HTML文件，并在生成的文件中引入入口Js,并且对HTML进行一些压缩的 *** 作。下面是一些配置的说明。

plugins: [
new HTMLWebpackPlugin({
        Title: ‘首页‘,//生成HTML文件的标题
        template: ‘./src/index.HTML‘,//模板文件,可以是 HTML,jade,eJs,hbs等等,如果你设置的 Title 和 filename于模板中发生了冲突，那么以你的Title 和 filename 的配置值为准。
        filename: ‘index.HTML‘,//打包后生成HTML文件的名字
        inject: true,/*  注入选项。有四个选项值 true,body,head,false
                                               *  true:默认值，script标签位于HTML文件的 body 底部
                                               *  body:script标签位于HTML文件的 body 底部（同 true）
                                               *  head:script标签位于head标签内
                                               *  false:不插入生成的Js文件，只是单纯的生成一个 HTML文件
                                              */
        favicon: ‘./favicon.ico‘,//icon的url
        Minify: {                             //对HTML文件进行压缩，Minify的属性值是一个压缩选项或者false默认值为false,不对生成的HTML文件进行压缩
            caseSensitive: true,//默认false。是否对大小写敏感，true为大小写敏感，false则大小写不敏感，会全部转为小写
            collapseBooleanAttributes: true,//是否简写boolean格式的属性如：Disabled="Disabled"简写为Disabled,默认false
            collapseWhitespace: true,//是否去除空格，默认false
            MinifyCSS: true,//是否压缩HTML里的CSS（使用clean-CSS进行的压缩） 默认值false
            MinifyJs: true,//是否压缩HTML里的Js（使用uglify-Js进行的压缩）
            preventAttributesEscaPing: true,//防止属性值的转义
            removeAttributeQuotes: true,//是否移除属性的引号 默认false
            removeComments: true,//是否移除注释 默认false
            removeCommentsFromcdaTA: true,//从脚本和样式删除的注释 默认false
            removeEmptyAttributes: true,//是否删除空属性，默认false
            removeOptionalTags: true,//若开启，生成的HTML中HTML,body未闭合
            removeRedundantAttributes: true,//删除多余的属性
            removeScriptTypeAttributes: true,//删除script的类型属性，在h5下面script的type默认值：text/JavaScript 默认值false
            removeStylelinkTypeAttributes: true,//删除style的类型属性， type="text/CSS" 同上
            useShortDOCTYPE: true             //使用短的文档类型，将文档转化成HTML5，默认false
        },
        hash: true,//默认false。当设置为true时，给注入的Js生成一个hash值（XXX.Js?22b9692e22e7be37b57e），以防止缓存
        cache: true,//默认true。内容变化的时候生成一个新的文件
        showErrors: true,//默认true。如果webpack编译出现错误，webpack会将错误信息包裹在一个 pre 标签内，也就是显示错误信息,方便定位错误
        chunks: [‘index‘],//编译后的HTML引入的Js入口文件
        excludeChunks: [‘home‘]               //同chuncks相反，是编译后的HTML排除的Js入口文件
    })
]