标签：插件 false plugin 默认 webpack html true

首先说明一下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             //使用短的文档类型，默认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

标签：插件,false,plugin,默认,webpack,html,true
来源： https://www.cnblogs.com/littlechen/p/11314233.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。