首页 > 代码库 > html-webpack-plugin插件的详细介绍和使用
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:‘自动生成自定义标题‘,//这个配置不生效,好奇怪 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 }
更详细的介绍点击这篇文章
html-webpack-plugin插件的详细介绍和使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。