[TOC] 如何引入項目中模塊 目錄 ``` ├── app.js ├── components │?? └── layer │?? ├── layer.tpl │?? ├── layer.js │?? └── layer.less ``` 1.`layer.tpl`文件 ``` <div class="layer"> <div>this is a <%= name %> layer</div> <% for(var i=0;i<arr.length ;i++){ %> <%= arr[i] %> <% } %> </div> ``` 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',], }, ```