前言

webpack处理组件中的模板文件有两种方式：
1.将模板文件当做一个字符串。比如html-loader：将HMTL模板文件当做一个string输出。
2.将模板文件当做一个已经编译好的模板函数。比如ejs-loader：将EJS模板文件当做一个函数输出。

html-loader 示例

1.安装依赖：

npm i -D html-loader

2.建立模板文件，目录为：

● layer.xml，后缀也可以是.html,.xml 等合法的后缀名，.xml 后缀是为了和根目录的index.html 区别开来，以便于以后对两种文件进行不同操作。就像vue 框架里的模板文件的后缀就是.vue 。

<div>hello world</div>

● layer.js，引入模板文件，将其加工成对象后输出

import tpl from './layer.xml'function layer(){    return{        name:'layer',        tpl:tpl    }}export default layer;

3.index.js 主入口文件调用模板，并将其添加到页面中

import Layer from './components/layer/Layer'const App=function(){    var dom=document.getElementById('app');    let layer=new Layer();    dom.innerHTML=layer.tpl;}new App();

4.index.html 主页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>html页面模块化</title></head><body><div id="app"></div></body></html>

5.webpack.config.js

module: {    rules: [        {            test: /\.xml/,            loader: 'html-loader'        }    ]},

ejs-loader 示例

1.安装依赖：

npm i -D ejs-loader

2.建立模板文件，目录为：

● ejs.tpl，模板文件的后缀也可以是.html,.xml,.ejs等合法的后缀名。ejs模板的语法还有许多，比如for 循环等，详情参考 https://ejs.bootcss.com/

<div>    <%= msg %></div>

●ejs.js，引入模板文件，将其加工成对象后输出

import tpl from './Ejs.tpl'function Ejs(){    return{        name:'ejs',        tpl:tpl    }}export default Ejs;

3.index.js 主入口文件调用模板，并将其添加到页面中

import Layer from './components/layer/Layer'import Ejs from './components/ejs/Ejs'const App=function(){    var dom=document.getElementById('app');    let layer=new Layer();    dom.innerHTML=layer.tpl;    var dom2=document.getElementById('app2');    let ejs=new Ejs();    dom2.innerHTML=ejs.tpl({        msg:'Hello China'    });}new App();
  • 因为ejs 的模板文件是个函数，所有ejs.tpl({key:value}) 可以向模板传参

4.index.html 主页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>html页面模块化</title></head><body><div id="app"></div><div id="app2"></div></body></html>

5.webpack.config.js

module: {    rules: [        {            test: /\.xml/,            loader: 'html-loader'        },        {            test: /\.tpl/,            loader: 'ejs-loader'        }    ]},

参考文档: https://www.webpackjs.com/loa...