《nodejs+gulp+webpack基础实战篇》课程笔记(八)--模板化开发演练:分离公共头文件
还是先来安装本课需要的插件:
npm install raw-loader --save-dev //示例:var header = require("xxx.html");就会把html的内容读取出来
这是一个webpack加载器,可以把文件原样返回为字符串。
这里补充下使用加载器的两种方法:
1、在我们的webpack配置文件中写上
{test:/\.html$/,loader:"加载器名称"} //这代表所有html后缀均会使用这个加载器来处理
2、在require的时候调用加载器
require(“加载器名!xxx.html”);
这里,我们也也将使用三种加载公共头部文件的方法:
第一种:在login.js中直接require(XXX);然后利用jquery的方式插入。
//var getHeader = require("raw!./../../tpl/header.include"); //$("#header").append(getHeader);
第二种:直接在页面中写上 <%=require("raw!xxx.html")%>.
<%=require("raw!./header.include")%>.
第三种:利用NODEJS代码<%=htmlWebPackPlugin.options.xxx%>
new HtmlWebpackPlugin({
这里随便设置一个变量名:这里用fs模块把文件读取出来。
})
include:{ header:require('fs').readFileSync("./src/tpl/head.include") }
<%=htmlWebpackPlugin.options.include.header%>
二、Gulp+webpack模板化开发演练(2):利用远程JSON半动态加载新闻头条
gulpfil run方法的新增内容:
gp.task("run",['config'],function(){ //获取热点头条样例 var req=require("request"); var fs=require("fs"); req.get("http://127.0.0.1:999/mynode/hot.php",function(err,response,body){ if(!err && response.statusCode==200) { fs.writeFileSync('./src/remote/hot.json',body); //调用 webpack webpack(webpack_config,function(err,status){ //这里需要些gulp处理过程 }) } })
我们来SRC/下新建一个remote文件夹。同时,我们在我们在login.html文件中加入演示代码
<div id="hot" > 今日头条: <%var getHot=JSON.parse(require("raw!./../remote/hot.json"))%> <% getHot.forEach(function(item){ %> <a href="<%=item.href%>" target="_blank"><%=item.text%></a> <%}) %> </div>
OK,我们gulp run,生成测试下.
版权声明:笔记整理者亡命小卒热爱自由,崇尚分享。但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的《前端开发速学成财(nodejs+gulp+webpack基础实战篇)》。本学习笔记小卒于博客园首发, 如需转载请尊重老师劳动,保留沈逸老师署名以及课程来源地址 .
上一课:《nodejs+gulp+webpack基础实战篇》课程笔记(七)--利用gulp自动完成配置"吐"给webpack执行