webpack图片打包+ejs include其他模块

对本菜鸟来说,webpack?哦,一个构建打包工具,感觉很高大上,用!!ejs?模板引擎,好像特别高大上,一定要用!!!小菜鸟心潮澎湃,在小项目中一结合,很好,很无奈,啊啊啊啊,遇到了好多问题。

图片打包

webpack.config.jsmodule 关于图片的配置:

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中引用的图片不会被打包,因为 webpackhtml 的处理并不友好,Google、Baidu了很久,参考了许多人的解决办法,比如说使用 html-withimg-loder,但是在我这边并不起作用(完全不知道为啥,暂时也不想知道为啥┑( ̄Д  ̄)┍)。

<img src="../../public/images/logo.png">

ejs登场,当当当~~~

webpack.config.jsmodule 配置增加了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",
  },

很好,图片打包成功。

然鹅,在将模板公共部分抽离出来,如 headerfooter,再 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问题,满足。

未来会出现的问题,就交给未来会变的厉害的我吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容