对本菜鸟来说,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
问题,满足。
未来会出现的问题,就交给未来会变的厉害的我吧。
网友评论