引入模块-并对模板赋值
最后更新于：2022-04-02 03:41:30
[TOC]
如何引入项目中模块
目录
```
├── app.js
├── components
│ └── layer
│ ├── layer.tpl
│ ├── layer.js
│ └── layer.less
```
1.`layer.tpl`文件
```
<%= arr[i] %>
<% } %>
```
2. `layer.js`文件
```
import tpl from './layer.tpl'; //引入 hmtl
import './layer.less'; //引入 less
function layer() {
return {
name:'layer',
tpl:tpl,
demo:function(){
alert("asd");
}
}
}
export default layer;
```
3.`layer.less` 文件
```
.layer{
width:600px;
height:200px;
background-color: red;
div{
width: 400px;
height: 100px;
background-color: green;
}
}
````
4.`app.js`文件
```
import layer from './components/layer/layer.js';
const App=function(){
var dom = document.getElementById('app');
dom.innerHTML = layer().tpl({
name:'ejs-test',
arr:['apple','range','hello']
});
}
new App();
```
## 安装`ejs-loader`并配置
`npm i -D ejs-loader`
在 `webpack.config.js`
```
{
test: /\.(tpl)$/,
use: ['ejs-loader',],
},
```
';
this is a <%= name %> layer
<% for(var i=0;i