webpack學習（三）html-webpack-plugin插件

一、html-webpack-plugin插件

簡單創建 HTML 文件，用於服務器訪問

例如：我們要為輸出文件添加哈希值標記，避免老的不變的文件重新加載，避免新修改的文件受緩存影響。

在前后兩次在終端輸入webpack打包時，即使component中的所有文件都沒有變化，資源是要重新加載一遍的。

同理，在生產中，每次需要在代碼中更新內容時， 服務器都必須重新部署，然后再由所有客戶端重新下載。

而通過網絡獲取資源可能會很慢，那么我們怎么才能避免這個問題呢———給output中的bundle文件提供hash值標記：

 

每次構建輸出文件時，如果代碼發生變化，輸出的文件將生成不同的hash值，這時將重新加載資源，但如果代碼無變化，輸出文件hash值也不變化，系統就會默認使用原來緩存的輸出文件。

 

而寫入hash值帶來的新問題——每次都要更改dist/index.html中JS的src

因為我們生成的hash是不斷變化的，與此同時index.html必須不斷更改<script>標簽中的src的值

解決hash值帶來的問題，我們可以使用html-webpack-plugin插件

 

修改我們的webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
     entry: {
         bundle : './src/js/main.js'
     },
     output: {
         filename: "[name]-[hash].js",
         path: __dirname + '/dist'
     },
     module: {
         loaders: [
             { test: /\.css$/, loader: 'style-loader!css-loader' },  //.css 文件使用 style-loader 和 css-loader 來處理.
             { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=8192'} //圖片文件使用 url-loader 來處理，小於8kb的直接轉為base64
         ]
     },
     plugins:[
         new HtmlWebpackPlugin({
             title: 'hello webpack',
             template:'src/component/index.html',　　//為新生成的index.html指定模版
             minify:{ //壓縮HTML文件
                 removeComments:true,    //移除HTML中的注釋
                 collapseWhitespace:true    //刪除空白符與換行符
             }
         })
     ]
};

 在終端里輸入webpack回車，打開我們的dist/index.html,居然已經自動寫入了src帶hash值的script標簽,並且HTML已經被壓縮！ (這個dist/html是自動生成的)

 

插個坑的點：

一開始執行時報了：無法找到模塊“webpack / lib / node / NodeTemplatePlugin”問題

解決方法很簡單，不需要亂搞，寫入這個命令就好了：npm link webpack --save-dev

 

一張圖解：

Configuration

可以進行一系列的配置，支持如下的配置信息，有興趣可以自己玩一下

title: 用來生成頁面的 title 元素
filename: 輸出的 HTML 文件名，默認是 index.html, 也可以直接配置帶有子目錄。
template: 模板文件路徑，支持加載器，比如 html!./index.html
inject: true | 'head' | 'body' | false  ,注入所有的資源到特定的 template 或者 templateContent 中，如果設置為 true 或者 body，
所有的 javascript 資源將被放置到 body 元素的底部，'head' 將放置到 head 元素中。
favicon: 添加特定的 favicon 路徑到輸出的 HTML 文件中。
minify:{ //壓縮HTML文件
  removeComments:true,    //移除HTML中的注釋
  collapseWhitespace:true    //刪除空白符與換行符
}
hash: true | false, 如果為 true, 將添加一個唯一的 webpack 編譯 hash 到所有包含的腳本和 CSS 文件，對於解除 cache 很有用。
cache: true | false，如果為 true, 這是默認值，僅僅在文件修改之后才會發布文件。
showErrors: true | false, 如果為 true, 這是默認值，錯誤信息會寫入到 HTML 頁面中
chunks: 允許只添加某些塊 (比如，僅僅 unit test 塊)
chunksSortMode: 允許控制塊在添加到頁面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
excludeChunks: 允許跳過某些塊，(比如，跳過單元測試的塊)