首页 > 代码库 > 《nodejs+gulp+webpack基础实战篇》课程笔记(八)--模板化开发演练:分离公共头文件

《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%>

 

《nodejs+gulp+webpack基础实战篇》课程笔记(八)--模板化开发演练:分离公共头文件