前端自学成才15

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