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配置一下就能够解决这个问题。更详细的介绍点击这篇文章