webpack4 将html 模块化
前言
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'
}
]
}, 相关推荐
拾光璇旅 2020-09-17
CristianoJason 2020-06-28
kuankeTech 2020-06-28
FEvivi 2020-06-16
isHooky 2020-05-15
breakpoints 2020-05-15
云之高水之远 2020-03-26
HeliumLau 2020-02-15
zhufu 2020-02-10
binglingnew 2020-02-09
First00 2020-02-02
人生百态 2020-02-02
binglingnew 2012-10-03
AndroidJava 2013-05-31
FEvivi 2019-12-22
binglingnew 2019-12-03
bowean 2019-12-01
kongcheng 2014-01-16