之前一直用 underscore 的 _.template() 填充htnl模版，但是后面發(fā)現(xiàn)有幾個(gè)點(diǎn)的問(wèn)題飒赃，一個(gè)是針對(duì)注入攻擊的，另一個(gè)是調(diào)用的不簡(jiǎn)潔。所以后面引入了ejs模版的使用涣雕。
1、有幾個(gè)好處闭翩，一個(gè)是使用<%=%><%-%>能有效控制注入攻擊挣郭，直接把DOM的元素展示出來(lái)，當(dāng)然本質(zhì)上的應(yīng)該在輸入源處就斷絕上傳疗韵，而且如果想在模版中動(dòng)態(tài)更改變量的內(nèi)容兑障，而且內(nèi)容包含類(lèi)似如下的dom元素，可能都不會(huì)被渲染出來(lái)：
<font color='red'>xxx<font>
<span>xxxx</span>
使用<%-%>就可以把dom元素也給渲染出來(lái)。
2流译、使用操作方便逞怨，例如直接將json數(shù)據(jù)倒騰到模版中就可以了
let data = {a:'xxx'};
let tpl = require('../templates/xxx.ejs');
...
return tpl(data);
3、但是有個(gè)坑需要注意的是福澡，在ejs模版中叠赦，對(duì)應(yīng)本地的資源、圖片引用無(wú)法簡(jiǎn)單的使用相對(duì)路徑革砸，例如 '../../images/xxx.png' ,這種的取資源文件的形式是走不通的除秀，不像html這種 loader的方式幫我們做了處理
所以我們可以用絕對(duì)路徑的方式，例如 'index/images/xxx.png', 但是這種方式算利，我們打包的時(shí)候也不會(huì)把圖片打包進(jìn)去册踩，因?yàn)槲覀儼奄Y源require進(jìn)入，那么可以采用幾種方法解決
（1 采用字體圖標(biāo)效拭，簡(jiǎn)直簡(jiǎn)單根本就不用再糾結(jié)這個(gè)問(wèn)題
（2 直接在JS中require引入棍好，不用在模版處理了，麻煩
（3 實(shí)在倔脾氣要在模版中操作允耿，那就拷貝吧借笙，拷貝到生產(chǎn)環(huán)境的對(duì)應(yīng)圖片目錄下，這樣保證生產(chǎn)環(huán)境和本地保持資源的一致较锡。有同事使用了webpack的一個(gè)插件业稼，這里直接使用了：
//在config.js中引入插件
var CopyWebpackPlugin = require('copy-webpack-plugin');
//在module.exports 中 plugins：
new CopyWebpackPlugin([{
from: 'runtime/images/*'
}])
