webpack4系列教程，如何合成精灵图片？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

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

安装webpack-spritesmith

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

• https://github.com/mixtur/webpack-spritesmith

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

npm i webpack-spritesmith -D

安装失败，raw.github被墙的读者，请执行：

cnpm i webpack-spritesmith -D

原理见这里：

• https://newsn.net/say/cnpm-raw-github.html

实验用料

这里准备了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: [
                       //...
                ],
            },
        ]
    }
}

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

• https://newsn.net/say/webpack-css.html
• https://newsn.net/say/webpack-url-loader.html

css相关配置说明

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

• spritesmith-generated这个目录，是个可配置的名字，用于存储精灵图和对应的css文件。它共出现了三次，分别是target.image和target.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文件。

png相关配置说明

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

额外配置

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

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

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

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

相关链接

• https://github.com/mixtur/webpack-spritesmith

css的相关配置文章：

• https://newsn.net/say/webpack-scss.html
• https://newsn.net/say/webpack-less.html
• https://newsn.net/say/webpack-css.html

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

• https://newsn.net/say/webpack-url-loader.html

结论

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

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

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。