webpack 3 html插件：html-webpack-plugin

首先说明一下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入口文件
    })
]

我平时在项目中也只用到的上面的其中一些配置，生产环境会配置minify。很多配置不明了是怎么用的，还有其它的配置可以查看github的说明， html-webpack-plugin， html-minifier

转载于:https://www.cnblogs.com/littlechen/p/11314233.html