Gulp+webpack模板化开发演练(1):分离公共头文件

分离html模板，抽取公共的模板
需要安装插件
这是一个webpack加载器，可以把文件原样返回字符串

npm install raw-loader --save-dev

示例代码
var header = require(“raw!xxx.html”);
就会把html内容读取出来

首先创建一个header.html

<p>这是头部公共部分</p>

这个是给我们login.html来包含的

<div id="header">

</div>

第一种方法：
在login.js中直接require(xxx);
然后利用jquery的方式来插入

第二种方法：
login.html中

<div id="header">
        <%=require('raw!./header.html')%>
</div>

执行gulp任务后，编译后的模板login-build.html中就已经包含了header.html的内容

第三种方法：
也是充分利用webpack的HtmlWebpackPlugin插件


执行 gulp run