html-webpack-plugin插件的詳細介紹和使用

 1 var webpack = require('webpack');
 2 var HtmlWebpackPlugin = require('html-webpack-plugin');
 3 module.exports = {
 4     devtool:'eval-source-map',
 5     devServer:{
 6         inline:true,
 7         colors:true,
 8         port:8080,
 9         contentBase:__dirname + '/public'
10     },
11     entry:{
12         index:__dirname + '/app/index.js',
13         main:__dirname + '/app/main.js'
14     },
15     output:{
16         path:__dirname + '/public', //經過HtmlWebpackPlugin插件生成的html文件存放在這個目錄下面
17         filename:'/js/[name].js' //編譯生成的js文件存放到根目錄下面的js目錄下面,若是js目錄不存在則自動建立
18     },
19     plugins:[
20         new HtmlWebpackPlugin({
21             title:'自動生成自定義標題',//若是使用了模板，就使用模板裏的title，這裏的title設置會失效，哪怕模板裏的title爲空
22             template:__dirname + '/public/tempIndex.html',//須要編譯的模板,能夠是jade等第三方模板引擎也能夠說純html頁面
23             filename:'demo.html',//最終生成的文件名,默認是index.html
24             hash:true,//是否給全部包含的js、css文件後面添加hash值,能夠用來清除緩存，但好像不是很管用
25             inject:true,// | 'head' | 'body' | false  ,注入全部的資源到特定的 template 或者 templateContent 中，若是設置爲 true 或者 body，全部的 javascript 資源將被放置到 body 元素的底部，'head' 將放置到 head 元素中。
26             chunks:['index'] //指定生成的文件demo.hmtl須要包括entry裏的哪些入口文件(這裏是index,main.js不會引入),不設置的話因此入口js文件都會被引入進來
27         }),
28         new webpack.HotModuleReplacementPlugin() //熱加載
29     ]
30 }

 Note:HtmlWebpackPlugin插件配置裏的hash屬性雖然能夠給html引入的因此css文件後面加hash字符串，能夠達到清除緩存的效果，但缺點是有些不須要清除緩存的css文件它也清除了，由於每次編譯它會給全部css文件加一樣的hash字符串。即時其餘css沒有變化。因此推薦用extract-text-webpack-plugin插件在編譯提取css屬性的時候用contenthash配置一下就能夠解決這個問題。更詳細的介紹點擊這篇文章