webpack图片打包+ejs include其他模块
2018-04-18 本文已影响0人
EnergyWu
对本菜鸟来说，webpack？哦，一个构建打包工具，感觉很高大上，用！！ejs？模板引擎，好像特别高大上，一定要用！！！小菜鸟心潮澎湃，在小项目中一结合，很好，很无奈，啊啊啊啊，遇到了好多问题。
图片打包
webpack.config.js 中 module 关于图片的配置：
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官网
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也不行呢。
经过“千挑万选”，看到了一个神器 underscore-template-loader ，这是一个可以一打二的loader，很赞！！！
test: /\.ejs$/,
loader: 'underscore-template-loader',
<body>
@require('../header/header.ejs')
<div>
<img src="../../public/images/bg.jpg">
</div>
</body>
哇～，真是特别好呢，运行完全没有问题，还可以向其中传入对应的值：
@require('../header/header.ejs', {"name": "这是一个值"})
当然，现在没问题不代表以后也没问题，暂时解决了ejs include问题，满足。
未来会出现的问题，就交给未来会变的厉害的我吧。
