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

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devtool:'eval-source-map',
    devServer:{
        inline:true,
        colors:true,
        port:8080,
        contentBase:__dirname + '/public'
    },
    entry:{
        index:__dirname + '/app/index.js',
        main:__dirname + '/app/main.js'
    },
    output:{
        path:__dirname + '/public', //通過HtmlWebpackPlugin插件生成的html文件存放在這個目錄下面
        filename:'/js/[name].js' //編譯生成的js文件存放到根目錄下面的js目錄下面,如果js目錄不存在則自動創建
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'自動生成自定義標題',//如果使用了模板，就使用模板里的title，這里的title設置會失效，哪怕模板里的title為空
            template:__dirname + '/public/tempIndex.html',//需要編譯的模板,可以是jade等第三方模板引擎也可以說純html頁面
            filename:'demo.html',//最終生成的文件名,默認是index.html
            hash:true,//是否給所有包含的js、css文件后面添加hash值,可以用來清除緩存，但好像不是很管用
            inject:true,// | 'head' | 'body' | false  ,注入所有的資源到特定的 template 或者 templateContent 中，如果設置為 true 或者 body，所有的 javascript 資源將被放置到 body 元素的底部，'head' 將放置到 head 元素中。
            chunks:['index'] //指定生成的文件demo.hmtl需要包括entry里的哪些入口文件(這里是index,main.js不會引入),不設置的話所以入口js文件都會被引入進來
        }),
        new webpack.HotModuleReplacementPlugin() //熱加載
    ]
}

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