合成精灵图的方法很多,本篇文章讲述的是:如何利用webpackspritesmith插件,来合成精灵图。精灵图是属于css优化的部分,主要的原理就是把很多的小图标合成为一个大的图,这样就可以达到减少并发数加速网页浏览的目的。但是,如果大量没有用到的图也被加载进来的话,这个加速效果就要大打折扣了。所以,事在人为。

苏南大叔:webpack4系列教程,如何合成精灵图片? - webpack-sprite-hero
webpack4系列教程,如何合成精灵图片?(图8-1)

本文测试环境:win10,node@12.19.0,webpack@4.43.0,webpack-spritesmith@1.1.0

安装webpack-spritesmith

本文需要安装的webpack插件叫做webpack-spritesmith,其官方主页是:

网络通畅的读者,请执行下面的命令安装:

npm i webpack-spritesmith -D

安装失败,raw.github被墙的读者,请执行:

cnpm i webpack-spritesmith -D

原理见这里:

苏南大叔:webpack4系列教程,如何合成精灵图片? - npm-install-fail
webpack4系列教程,如何合成精灵图片?(图8-2)

实验用料

这里准备了2个小图标,然后放到了src/icon/目录下面。然后根据苏南大叔目前的配置情况,修改配置文件webpack.config.js,主要的逻辑如下:

var SpritesmithPlugin = require('webpack-spritesmith');
module.exports = {
    plugins: [
        new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, 'src/ico'),
                glob: '*.png'
            },
            target: {
                image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),
                css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.css')
            },
            apiOptions: {
                cssImageRef: "~sprite.png"
            }
        }),
    ],
    resolve: {
        modules: ["node_modules", "spritesmith-generated"]
    },
    module: {
        rules: [
            // {test: /\.png$/, use: [
            //     'file-loader?name=img/[hash].[ext]'
            // ]},
            {
                test: /\.(png|jpg|gif|jpeg|svg)$/,
                use: [
                       //...
                ]
            },
            {
                test: /\.css$/,
                use: [
                       //...
                ],
            },
        ]
    }
}

苏南大叔:webpack4系列教程,如何合成精灵图片? - css-result-final
webpack4系列教程,如何合成精灵图片?(图8-3)

这个配置可能用到下面文章里面的代码:

css相关配置说明

这里非常需要对这个配置文件进行说明:

  • spritesmith-generated这个目录,是个可配置的名字,用于存储精灵图和对应的css文件。它共出现了三次,分别是target.imagetarget.css,以及resolve.modules中。
  • apiOptions.cssImageRef这个变量,用于控制在target.css这个文件中,如何找到图片文件,也就是target.image。(似乎有点多余对吧?)而其中的~,将在resolve.modules中进行查找。也就是会发现spritesmith-generated这个目录下面的sprite.png文件。
  • target.css这个文件的设置,非常智能。写不同的名字后缀,生成的内容也会不同。所以,可以根据实际情况,选择.less.scss.css.styl文件。里面的内容,都是会智能变化适应不同的css语言的。然而,值得一提的是,这个css文件如果想要在webpack项目中正常使用,还是需要配置对应的css相关loader的,相关文章见文末。苏南大叔认为:使用.css文件就好,官方使用的是.styl文件。

苏南大叔:webpack4系列教程,如何合成精灵图片? - sprite-config-1
webpack4系列教程,如何合成精灵图片?(图8-4)

png相关配置说明

  • 上述webpack-spritesmith会把所有的.png文件进行合并处理,生成一个.png的精灵图,和对应的css文件。为什么是.png图片呢,因为.png具有很好的透明度啊,非常适合精灵图的使用场景。
  • 精灵图(一般是.png文件)也是需要loader进行处理,才能在webpack项目中正常使用的。那么,在原版的示例文件中,是使用file-loader进行的处理,而苏南大叔的实验中,一如既往的使用url-loader进行处理。值得一提的是:最终dist目录中,精灵图所在的目录,就是在这里进行设置的。请大家自行观察。

苏南大叔:webpack4系列教程,如何合成精灵图片? - sprite-config-2
webpack4系列教程,如何合成精灵图片?(图8-5)

额外配置

需要在对应的.js文件中,加载上述的精灵css文件。

import "./spritesmith-generated/sprite.css";

苏南大叔:webpack4系列教程,如何合成精灵图片? - sprite-result-2
webpack4系列教程,如何合成精灵图片?(图8-6)

并且在html中正确使用class。在这里,class的名字是有规律的,具体的规律,可以参考生成的精灵css文件。

<div class="icon-close"></div>
<div class="icon-open"></div>

苏南大叔:webpack4系列教程,如何合成精灵图片? - sprite-result-1
webpack4系列教程,如何合成精灵图片?(图8-7)

苏南大叔:webpack4系列教程,如何合成精灵图片? - sprite-result-3
webpack4系列教程,如何合成精灵图片?(图8-8)

相关链接

css的相关配置文章:

图片处理的相关配置文件:

结论

正确理解这个精灵图片webpack-spritesmithloader,是很不容易的。有点烧脑,苏南大叔并没有使用官方的例子,因为那个似乎更烧脑。在后面的文章中,再有机会在描述吧。

更多webpack的例子,请参考苏南大叔的博客文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: