①需要用到html-webpack-plugin插件 安装--save-dev
在配置文件中引引用：
var htmlWebpackPlugin =require('html-webpack-plugin');
初始化：new htmlWebpackPlugin(）
里面可以带参数写成new htmlWebpackPlugin({
})
使用，在webpack配置文件中输入：
plugin:[
new htmlWebpackPlugin({ //new htmlWebpackPlugin()初始化
template:'index.html',//模板
filename:path.resolve(__dirname, 'build/index.html'),//放文件路径
inject:'body'//在哪里插入脚本
title:'webpack is good'//标题
date:new Date()//在htmlbody中输入<%=htmlWebpackPlugin.options.date %>
})
]
在html中调用title标签直接写<%=htmlWebpackPlugin.options.title %>可以去到title的值
output:{
publicpath:'http://cdn.com/'//打包后的js路径前面都加上这个地址比如：http://cdn.com/js/...为上线使用
}
②多页面生成（多个页面使用一个模板）
plugin:[
new htmlWebpackPlugin({
template:'index.html',//模板
filename:path.resolve(__dirname, 'build/index.html'),//放文件路径
inject:'body'//在哪里插入脚本
title:'webpack is good'//标题
chunks:'a'//页面中加入a的entry
}),
new htmlWebpackPlugin({
template:'index.html',//模板
filename:path.resolve(__dirname, 'build/index.html'),//放文件路径
inject:'body'//在哪里插入脚本
title:'webpack is good'//标题
chunks:['b']
})
手动写chunks当页面多时比较麻烦，用另外一个参数
excludeChunks:['b','c']这样是排除b和c后的entry的js文件
]
更方便的可以了解：html-webpack-inline-source-plugin插件https://www.npmjs.com/package/html-webpack-inline-source-plugin
网友评论