陈剩肾
陈剩肾
3月前 · 2 人阅读

前言

  上篇文章我们讲解了如何给csslesssass自动加上厂商前缀,那么我们整个webpack项目,差不多就可以希望下去了,但是我们到目前为止,一直有个问题,没去做,是什么呢?就是模板文件里面我们利用css-loader,style-loader,babel-loader等等很多loader,将其和模板文件打包在一起,形成一个页面,但是我们要怎么想页面里面填充东西呢?难道修改模板文件那个H5?答案当然不是,本节教程,我将告诉大家,如何向页面中传入想要的东西。

本系列教程如下表所示:

建立模板文件

webpackAPI给我们介绍了很多模板引擎的试用方法,其中就有ejsjade等主流模板引擎的编译方式,当然了,最基础的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,是ejsjade呢?其实都是一样的,没什么大的区别,区别在于用什么文件,引用什么loader

案例:使用ejs作为模板文件

  1. 新建一个模板文件,命名为test.ejs,内容如下:
<div>
    <span>我可以得到传来的变量 <%= name %></span>
    <% for(var i = 0; i < arr.length; i++){ %>
    <%= arr[i] %>
    <% } %>
</div>
  1. 安装ejs-loader和配置webpack.config.js文件
{
  test: /.ejs$/,
  loaders: ['ejs-loader']
}
  1. js文件引入这个ejs模板文件
import tpl from "../../template/test.ejs";
let dom = document.getElementById("container");
dom.innerHTML = tpl({
    name: "这是个变量",
    arr: ["a", "b", "c"]
});
  1. 编译看效果如下:


后言

  本节教程主要讲了如何将模板文件编译打包形成最终页面,今天连续讲了两个内容,希望大家不会的可以好好消化一下,有什么有疑问的可以问度娘,实在没办法可以简信告诉我,谢谢大家!

收藏 0
模板 html loader 文件 ejs webpack
评论 ( 0 )