解析webpack插件html-webpack-plugin

前言：

　　本文将分為基本概念、基礎使用、子產品的運用（問題解決）來進行闡述。

一、基本概念

　　我們為什麼會需要HtmlWebpackPlugin插件？

　　在真實釋出項目時，釋出的是dist檔案夾中的内容，但是dist檔案夾中如果沒有index.html檔案，那麼打包的js等檔案也就沒有意義了。是以，我們需要将index.html檔案打包到dist檔案夾中，這個時候就需要使用HtmlWebpackPlugin插件。

　　那麼，HtmlWebpackPlugin插件到低可以為我們做什麼呢？

　　一、自動生成一個index.html檔案(可以指定模闆來生成)

　　二、将打包的js檔案，自動通過script标簽插入到body中

二、基礎使用

　　1、安裝插件 npm install html-webpack-plugin --save-dev （因為隻在生産環境下用到，是以加上-dev）

　　2、使用插件，修改webpack.config.js檔案中plugins部分的内容如下：

module.exports = {
    plugins: [
        new htmlWebpackPlugin({
            title: "this is title", //用于生成的HTML文檔的标題
            filename: "index.html", //生成的模闆檔案的名字，預設index.html
            template: "index.html", //模闆來源檔案
            inject: true | 'head' | 'body' | false ,注入所有的資源到特定的 template 或者 templateContent 中，如果設定為 true 或者 body，所有的 javascript 資源将被放置到 body 元素的底部，'head' 将放置到 head 元素中
            favicon: "", //指定頁面圖示
            minify: {} | false, //傳遞html-minifier選項給minify輸出
        　　/*
            {
                caseSensitive: false, ////是否大小寫敏感
                collapseBooleanAttributes: true, //是否簡寫boolean格式的屬性如：disabled="disabled" 簡寫為disabled 
                collapseWhitespace: true //是否去除空格
            },
            */
            hash: true, //是否生成hash添加在引入檔案位址的末尾，類似于常用的時間戳，這個可以避免緩存帶來的麻煩。如果為 true, 将添加一個唯一的 webpack 編譯 hash 到所有包含的腳本和 CSS 檔案，對于解除 cache 很有用
            cache: true, //是否需要緩存，如果填寫true，則檔案隻有在改變時才會重新生成
            showErrors: true, //是否将錯誤資訊寫在頁面裡，預設true，出現錯誤資訊則會包裹在一個pre标簽内添加到頁面上
            chunks: ['a', 'b'], //引入的a,b子產品，這裡指定的是entry中設定多個js時，在這裡指定引入的js，如果不設定則預設以數組形式全部引入
            chunksSortMode: "auto", //引入子產品的排序方式
            excludeChunks: ['a', 'b'], //排除的子產品,引入的除a,b子產品以外的子產品，與chunks相反;
            xhtml: false //生成的模闆文檔中标簽是否自動關閉，針對xhtml的文法，會要求标簽都關閉，預設false
        })
    ]
};

三、子產品的運用

　　情景描述：當三個本地服務想同時正常開啟，但統一出現了一個不完整的頁面。

　　解決方案：添加chunks屬性，主要實作子產品載入，即entry的設定。

　　原因：

　　　　　　production 都是單 entry 打包，develop 卻存在多 entry 打包；

　　　　　　是以三個本地服務同時開啟直接關系到打包的問題，那麼，我們設定好chunks入口，并區分它的模式，進行正确的打包即可。

解析webpack插件html-webpack-plugin