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