实战演练:用gulp+webpack构建用户登录(1)

1.先看目录结构

src

目录下是源文件，最终要”编译”到

build

目录下。

tpl/login.html

是登录模板文件，主要代码如下

<h2>用户登录</h2>
<p>用户名：</p>
<p><input type="text" name="username" id="username" /></p>
<p>密码：</p>
<p><input type="password" name="pwd" id="pwd" /></p>
<p><button id="loginBtn">登录</button></p>

src/main.js

是控制登录脚本文件：

var loginBtn = document.getElementById("loginBtn");
loginBtn.onclick = function(){
alert("登录测试");
}

2.先来看一看如何利用webpack把main.js打包到

build/js

目录下

2.1编辑项目根目录下的webpack.config.js文件：

module.exports = {
// entry是入口文件，可以多个，代表要编译那些js
entry:['./src/main.js'],
output:{
path: __dirname+'/build/js', // 输出到那个目录下（__dirname当前项目目录）
filename:'build.js' //最终打包生产的文件名
},
};

2.2 在终端执行

webpack

命令后



3.我们的需求是把src/tpl/login.html生成到build/html/下，把src/main.js生成到build/js/下。

我们来结合gulp完成这个需求。

利用我们之前学习的gulp-webpack把js编译；利用gulp把tpl下面的文件生成到build/html/目录下。

3.1 编辑gulpfile.js:

var gp = require('gulp');
var gulp_webpack = require('gulp-webpack')
var webpack= require('webpack');
var webpack_config = require('./webpack.config.js');

// 生成js文件
gp.task('build-js',function(){
gulp_webpack(webpack_config,webpack)
.pipe(gp.dest('./build/js'))
})

// 最终生成
/*
在执行run这个任务的时候，会先执行第二个参数里的任务
*/
gp.task('run',['build-js'],function(){
gp.src(['./src/tpl/*.html']) //把src/tpl/下的所有html文件
.pipe(gp.dest('./build/html')) //最终生成到build/html/下面
})

3.2执行命令：

gulp run

我们暂时在html/login.html手动的引入js/build.js文件

<script src="../../build/js/build.js"></script>

最后来测试一把