1.首先 安装一个插件
npm install html-webpack-plugin --save-dev
2.这个插件的功能是:
1) 可以把html和js文件,编译到指定目录,并且自动生成html的js引用,比如,之前我们在html文件中,需要提前写好
<script src="../js/build.js"></script>
现在,我们不需要这样写了,插件自动根据路径,帮我们写好。
2)配置js引用在html的位置,可以设置在body或者head
3)js后缀生成hash码,用于解决缓存的问题。
3. 首先,我们要在webpack.config.js配置。
var HtmlWebpackPlugin = require('html-webpack-plugin');//引用插件
module.exports =
{
entry: [ //entry 是入口文件,可以多个,代表要编译那些js
'./src/main.js'
],
output: {
path: __dirname+'/build/js', //输出文件夹
filename:'build.js' //最终打包生成的文件名
},
plugins:[
new HtmlWebpackPlugin({
filename: __dirname+'/build/html/login.html',//打包生成的html地址和名称
template: __dirname+'/src/tpl/login.html',//输出的html 也就是源文件
inject:'body',//js引用的位置
hash:true //是否生成hash码
})
]
}
4.在gulp中,直接执行webpack,gulpfile.js的配置如下:
gp.task("run",function(){
webpack(webpack_config,function(err,status){
//这里需要些gulp处理过程
})
5.执行
gulp run