《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 >
        今日头条：
        <%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基础实战篇)》。本学习笔记小卒于博客园首发， 如需转载请尊重老师劳动，保留沈逸老师署名以及课程来源地址 .

上一课: