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

Posted 2020-08-09

　　还是先来安装本课需要的插件：

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

---