html-webpack-plugin外掛程式的詳細介紹和使用

標籤：模板引擎   href   根目錄   產生   public   demo   hot   dev   注入   

 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:‘自動產生自訂標題‘,//這個配置不生效，好奇怪22             template:__dirname + ‘/public/tempIndex.html‘,//需要編譯的模板,可以是jade等第三方模板引擎也可以說純html頁面23             filename:‘demo.html‘,//最終產生的檔案名稱,預設是index.html24             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 }

 更詳細的介紹點擊這篇文章

html-webpack-plugin外掛程式的詳細介紹和使用