共计 1747 个字符，预计需要花费 5 分钟才能阅读完成。
前言
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…
正文完
