首页 > 代码库 > 《nodejs+gulp+webpack基础实战篇》课程笔记（五）-- 实战演练，构建用户登录
《nodejs+gulp+webpack基础实战篇》课程笔记（五）-- 实战演练，构建用户登录
一、用gulp +webpack构建登录页面(1):简单构建
我们做项目经常要做的“百搭”页面 登录页面 ，它的基本要素如下: 1、页面展示要素 2、基本脚本判断 3、后端交互。
在项目根目录下创建 src(有逼格的名称) --tpl (代表是模板) --login.html（后缀随意） 注意，一旦发布到生产环境， 以上文件是不需要上传到服务器上的。 <!--src/tpl/login.html-->
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录测试页面</title></head><body><h2>用户登录</h2> <div> 用户名 </div> <div> <input type="text" id="txtUerLogin"/> </div> <div> 密码 </div> <div> <input type="password" id="txtUserPwd"/> </div> <div> <button id="cmdLogin">登录</button> </div><script src="../js/build.js"></script>
<!--因为login.html 最终是要引用JS文件的。 我们先写死在login.html里（这说明 :肯定有不写死的方法 ）-->
</body></html>
var cmdLogin = document.getElementById("cmdLogin");cmdLogin.onclick = function(){ alert("登录测试")}//src/main.js创建一个主文件
这里，我们只是演示如何用webpack编译，所以代码简单且LOW，好下面，开始测试用webpack编译。
//先到webpack.config.js中确认我们的入口文件module.exports={ entry:[ //entry是入口文件，可以多个，代表要编译哪些JS ‘./src/mian.js‘ ], output:{ path: __dirname+‘/build/js‘, //输出文件夹 filename: ‘build.js‘ //最终打包生成的文件名 }}
在项目根目录下执行命令:webpack 一切编译好了
下面开始结合gulp，这节课我们做简单点 1、利用我们之前学习的gulp-webpack把JS编译。2、利用 gulp把 tpl下面的文件生成到build/html里面去。
//在gulpfile重新写入两个task任务//生成JS文件 gp.task("build-js",function(){ gulp_webpack(webpack_config,webpack) .pipe(gp.dest(‘./build/js‘)) })//最终生成gp.task("run",[‘build-js‘],function(){ gp.src([‘./src/tpl/*.html‘]) .pipe(gp.dest(‘./build/html‘))})
运行：
OK ，我们在build文件夹中，分别在html和JS文件下生成了login.html和build.js文件，在浏览器中运行login.html文件，我们就能看到生成后的效果.
二、用gulp+webpack构建用户登录(2):简化
老规矩，这节需要使用到webpack一个插件，我们先安装
npm install html-webpack-plugin --save-dev
先用一个简单的方式演示下这个插件的使用：
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);//万事先引用module.exports={ entry:[ //entry是入口文件，可以多个，代表要编译哪些JS ‘./src/mian.js‘ ], output:{ path: __dirname+‘/build/js‘, //输出文件夹 filename: ‘build.js‘ //最终打包生成的文件名 }, plugins:[ new HtmlWebpackPlugin({ filename: __dirname + ‘/build/html/login_build.html‘, template: __dirname + ‘/src/tpl/login.html‘, inject:"body", //在head中引用就写head hash:true }) //初始化这个对象 ]}
OK，在node中运行webpack，我们得到和上一节课一样的结果。
回到gulp中，
//生成JS文件gp.task("build-js",function(){ gulp_webpack(webpack_config) .pipe(gp.dest(‘./build/js‘))})//最终生成gp.task("run",function(){ webpack(webpack_config,function(err,status){ //这里需要些gulp处理过程 }) /* gp.src([‘./src/tpl/!*.html‘]) .pipe(gp.dest(‘./build/html‘))*/})
node中继续运用gulp run，结果还是一样
《nodejs+gulp+webpack基础实战篇》课程笔记（五）-- 实战演练，构建用户登录
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。