首页 > 代码库 > 《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基础实战篇》课程笔记(八)--模板化开发演练:分离公共头文件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。