前言
上篇文章我们讲解了如何给css，less，sass自动加上厂商前缀，那么我们整个webpack项目，差不多就可以希望下去了，但是我们到目前为止，一直有个问题，没去做，是什么呢？就是模板文件里面我们利用css-loader,style-loader,babel-loader等等很多loader，将其和模板文件打包在一起，形成一个页面，但是我们要怎么想页面里面填充东西呢？难道修改模板文件那个H5？答案当然不是，本节教程，我将告诉大家，如何向页面中传入想要的东西。
目录
https://www.jianshu.com/p/9c9b555b52e8
建立模板文件
webpack的API给我们介绍了很多模板引擎的试用方法，其中就有ejs，jade等主流模板引擎的编译方式，当然了，最基础的html当然也是必须有的，这里我们先用html;
第一步：创建一个tpl.html充当模板文件，内容如下：
tpl.html
<p>这是一个模板文件，一会儿我会被编译到页面中去！</p>
第二步：js中引入该模板文件，如下所示：
import homeStyle from '../../style/home/home.less';
import tpl from "../../template/demo.html";
let dom = document.getElementById("container");
dom.innerHTML = tpl;
第三步：webpack编译运行：
编译报错
报错：
在这里，我们看到了编译出错了，为什么呢？报错说的很清楚了，我们缺少对html文件编译解析的loader，接下来我们安装一个html-loader，然后再webpack.config.js中配置一下对于html文件的配置。
第四步：配置webpack.config.js:
{
test: /\.html$/,
loaders: ['html-loader']
}
第五步：运行webpack看看编译效果：
页面效果
大家可以看到，在这里，我们的html模板文件就已经被编译进页面当中了，那么如果我们的模板文件不是html，是ejs，jade呢？其实都是一样的，没什么大的区别，区别在于用什么文件，引用什么loader。
案例：使用ejs作为模板文件
- 新建一个模板文件，命名为
test.ejs，内容如下：
<div>
<span>我可以得到传来的变量 <%= name %></span>
<% for(var i = 0; i < arr.length; i++){ %>
<%= arr[i] %>
<% } %>
</div>
- 安装
ejs-loader和配置webpack.config.js文件
{
test: /\.ejs$/,
loaders: ['ejs-loader']
}
-
js文件引入这个ejs模板文件
import tpl from "../../template/test.ejs";
let dom = document.getElementById("container");
dom.innerHTML = tpl({
name: "这是个变量",
arr: ["a", "b", "c"]
});
-
编译看效果如下：
最终效果
后言
本节教程主要讲了如何将模板文件编译打包形成最终页面，今天连续讲了两个内容，希望大家不会的可以好好消化一下，有什么有疑问的可以问度娘，实在没办法可以简信告诉我，谢谢大家！
说明
原创作品，禁止转载和伪原创，违者必究！
网友评论