編輯于2016年
html-webpack-plugin
安裝
npm install html-webpack-plugin@2 --save-dev
example
plugins: [
new webpack.optimize.UglifyJsPlugin({ // 壓縮webpack 后生成的代碼較長時間唱逢，通常推到生產(chǎn)環(huán)境中才使用
compress:{
warnings: false
}
}),
new htmlWebpackPlugin({ // webpack 指定目錄(package內設置)生成靜態(tài)HTML文件
title: "自動生成網(wǎng)頁標題",
filename: "test.html",
template: "temIndex.html",
hash: true, // true | false育谬。如果是true具帮，會給所有包含的script和css添加一個唯一的webpack編譯hash值裕坊。這對于緩存清除非常有用滋饲。
inject: true, // | 'head' | 'body' | false ,注入所有的資源到特定的 template 或者 templateContent 中桶现，如果設置為 true 或者 body躲雅，所有的 javascript 資源將被放置到 body 元素的底部，'head' 將放置到 head 元素中骡和。
chunks: ["app"] // 使用chunks 需要指定entry 入口文件中的哪一個模塊
})
]
基礎配置
可以進行一系列的配置相赁，支持如下的配置信息
- 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: {} | false , 傳遞 html-minifier 選項給 minify 輸出
- hash: true | false, 如果為 true, 將添加一個唯一的 webpack 編譯 hash 到所有包含的腳本和 CSS 文件赃承，對于解除 cache 很有用。
- cache: true | false悴侵，如果為 true, 這是默認值瞧剖，僅僅在文件修改之后才會發(fā)布文件。
- showErrors: true | false, 如果為 true, 這是默認值可免，錯誤信息會寫入到 HTML 頁面中
- chunks: 允許只添加某些塊 (比如抓于，僅僅 unit test 塊)
- chunksSortMode: 允許控制塊在添加到頁面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
- excludeChunks: 允許跳過某些塊浇借，(比如毡咏，跳過單元測試的塊)
