webpack 4.0 学习日志(九)—— 如何打包图片

这节我们来讲一个比较重要的内容,就是如何打包图片,这也是很多人问的一个问题。

我们首先在网站上加个图片,就在 css 里加,加个背景图。

# 在 src 目录下新建 images 目录
$ mkdir src/images

src/app.scss

body {
  background: url('./images/logo.png') 0 0 no-repeat;
  ...
}

你要确保 src/images 下有 logo.png 这张图片(随便在网络上找一张)。

然后 npm run dev,你会发现类似下面的错误:

只要找到适合的 loader 来处理扩展名为 png 的图片文件即可。

1. file-loader

我找到了一个:file-loader

官方对这个 loader 的定义是这样的:

Instructs webpack to emit the required object as file and to return its public URL

大概意思是:对一些对象作为文件来处理,然后可以返回它的URL。

还是看下面操作一遍就会知道的。

先准备一些数据。

之前我们是用 pug(查看如何使用 pug (jade) 作为 HTML 的模板) 来作为 HTML的模板的,我们还原回来,重新使用 html 作为模板。

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
</body>
</html>

webpack.config.js

plugins: [
  new CleanWebpackPlugin(pathsToClean),
  new HtmlWebpackPlugin({
    // 这里注意一下,不再用 pug 模板,还是用回之前的 index.html
    template: './src/index.html',
    filename: 'index.html',
    minify: {
      collapseWhitespace: true,
    },
    hash: true,
    excludeChunks: ['contact']
  }),
  ...

关键时刻来了。

安装。

$ npm install --save-dev file-loader

webpack.config

...

module.exports = {

  ...
  module: {
    rules: [
      ...
      {
        test: /\.png$/,
        use: [
          {
            loader: 'file-loader',
          },
        ]
      },
    ]
  }
};

效果如下:

这里文件名带着 hash ,我们要如何让 file-loader 输出图片的原文件名呢?

2. file-loader 的参数

其实,file-loader 是可以带参数的,例如下面这样:

test: /\.(gif|png|jpe?g|svg)$/i,
use: [
  {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: 'images/'
    }
  },

/\.(gif|png|jpe?g|svg)$/i 表示可以处理好多图片的格式,毕竟不只是 png 才是图片,别的扩展名的文件也可能是图片嘛。

[name] 代表文件名,[ext] 代表文件扩展名,outputPath 是输出的路径。

试试效果:

good!

3. 解析 html 代码里面 img 的标签

忘了一个重要的地方,之前我们是在 CSS 里引用图片作为背景的,但是,我们经常是在 html 直接使用 src 标签来引用图片的。

例如下面这样:

<img src="./images/money-bag.svg" alt="" height=50>

点击下载:money-bag.svg

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <img src="./images/money-bag.svg" alt="" height=50>
</body>
</html>

然而结果是这样的:

404了,文件找不到,没有成功。

其实缺少了一个在 html 代码里处理 img 标签的 loader

这个 loaderhtml-loader

官方对它的定义是这样的:

Exports HTML as string. HTML is minimized when the compiler demands.

大概意思是说,把 html 变成导出成字符串的过程中,还能进行压缩处理(minimized)。

现在我们来加上这个 loader

先安装。

$ npm install --save-dev html-loader

...
{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'images/'
      }
    },
  ]
},
// 下面几行才是 html-loader 的配置内容
{
  test: /\.html$/,
  use: [ {
    loader: 'html-loader',
    options: {
      minimize: true
    }
  }],
}
...

再试试发现就可以了。

4. 压缩图片

有时候图片太大,我们输出到生产环境的时候,希望可以让图片文件的体积小点,webpack 也可以轻易办到,就是自动压缩图片,然后生产环境拿到的图片就会很小。

还是用一个插件,这个插件叫 image-webpack-loader

这个插件主要是来压缩图片文件的。

安装。

$  npm install image-webpack-loader --save-dev

webpack.config.js

{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'images/'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
},
{
  test: /\.html$/,
  use: [ {
    loader: 'html-loader',
    options: {
      minimize: true
    }
  }],
}

源文件的图片大小情况是这样的:

$ ls -lh src/images
total 256
-rw-r--r--@ 1 hfpp2012  staff   112K Nov  3 23:10 logo.png
-rw-r--r--@ 1 hfpp2012  staff    11K Dec  4 16:32 money-bag.svg

而压缩后(npm run prod):

$ ls -lh dist/images
total 96
-rw-r--r--  1 hfpp2012  staff    33K Dec  4 21:34 logo.png
-rw-r--r--  1 hfpp2012  staff   8.5K Dec  4 21:34 money-bag.svg

由上面的对比可知,压缩后体积减少了一些。

当然这个插件,肯定还有更多的用法,具体查看 readme 文档吧。

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

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,101评论 0 21
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,687评论 7 110
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,733评论 0 1
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,285评论 4 31
  • 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...
    阳阳阳一堆阳阅读 3,285评论 0 5