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