對本菜鳥來說，webpack？哦，一個構(gòu)建打包工具，感覺很高大上，用??！ejs？模板引擎，好像特別高大上，一定要用?。。⌒〔锁B心潮澎湃，在小項目中一結(jié)合，很好，很無奈，啊啊啊啊，遇到了好多問題。
圖片打包
webpack.config.js 中 module 關(guān)于圖片的配置：
module: {
rules: [
{
test: /\.(png|jp?g|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'public/images/[name].[hash].[ext]',
},
},
],
},
]
}
css中圖片正常引用即可：
background-image: url(../../public/images/banner.jpg);
js中需要通過模塊化的方式引用圖片:
const gLogo = require('../../public/images/logo.png');
html中引用的圖片不會被打包，因為 webpack 對 html 的處理并不友好，Google、Baidu了很久，參考了許多人的解決辦法，比如說使用 html-withimg-loder，但是在我這邊并不起作用（完全不知道為啥，暫時也不想知道為啥┑(￣Д ￣)┍）。
<img src="../../public/images/logo.png">
ejs登場，當當當~~~
webpack.config.js 中 module 配置增加了ejs rules：
module: {
rules: [
{
test: /\.ejs$/,
loader: 'ejs-loader',
},
]
}
對于圖片打包，ejs有特殊的引用圖片方式：
<img src="<%= require('../../public/images/logo.png') %>">
# 附贈ejs官網(wǎng)
http://ejs.co/
運行
npm run build
## package.json
"scripts": {
"start": "echo TODO",
"dev": "webpack-dev-server --open",
"build": "webpack --mode production",
},
很好，圖片打包成功。
然鵝，在將模板公共部分抽離出來，如 header、footer，再 include 到各頁面時，webpack打包時會報錯：
ERROR: include is not defined
官方推薦使用 ejs-compiled-loader 來引入其他的ejs模塊:
test: /\.ejs$/,
loader: 'ejs-compiled-loade',
but, ejs中圖片不能打包，require也不行呢。
經(jīng)過“千挑萬選”，看到了一個神器 underscore-template-loader ，這是一個可以一打二的loader，很贊！?。?/p>
test: /\.ejs$/,
loader: 'underscore-template-loader',
<body>
@require('../header/header.ejs')
<div>
<img src="../../public/images/bg.jpg">
</div>
</body>
哇～，真是特別好呢，運行完全沒有問題，還可以向其中傳入對應(yīng)的值：
@require('../header/header.ejs', {"name": "這是一個值"})
當然，現(xiàn)在沒問題不代表以后也沒問題，暫時解決了ejs include問題，滿足。
未來會出現(xiàn)的問題，就交給未來會變的厲害的我吧。
