webpack傻瓜式入门教程-06

前言

  上篇文章我们讲解了如何给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

这是一个模板文件，一会儿我会被编译到页面中去！

第二步：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作为模板文件

1. 新建一个模板文件，命名为test.ejs，内容如下：

    我可以得到传来的变量 <%= name %>
    <% for(var i = 0; i < arr.length; i++){ %>
    <%= arr[i] %>
    <% } %>

2. 安装ejs-loader和配置webpack.config.js文件

{
  test: /\.ejs$/,
  loaders: ['ejs-loader']
}

3. js文件引入这个ejs模板文件

import tpl from "../../template/test.ejs";
let dom = document.getElementById("container");
dom.innerHTML = tpl({
    name: "这是个变量",
    arr: ["a", "b", "c"]
});

4. 编译看效果如下：

   
   
   

   最终效果

后言

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

说明

原创作品，禁止转载和伪原创，违者必究！