webpack原理篇（六十二）：实战开发一个自动合成雪碧图的loader-阿里云开发者社区

webpack原理篇（六十二）：实战开发一个自动合成雪碧图的loader

2023-02-24 69

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： webpack原理篇（六十二）：实战开发一个自动合成雪碧图的loader

说明

玩转 webpack 学习笔记

支持的语法

对样式里面图片引用后面加 __sprite 进行图片合并

如何将两张图片合成一张图片？

使用 spritesmith

https://github.com/twolfson/spritesmith

spritesmith 使用示例

const sprites = ['./images/1.jpg', './images/2.jpg'];
Spritesmith.run({ src: sprites }, function handleResult(err, result) {
    result.image;
    result.coordinates;
    result.properties;
});

实战开发

1、新建初始化项目

新建文件夹 sprite-loader，然后执行下面命令初始化项目

npm init -y

2、添加图片资源

我们在 src 的 img 文件夹里添加 3 张图片

3、安装依赖

npm i spritesmith

4、测试合成雪碧图的代码

新建 test.js 文件

const Spritesmith = require('spritesmith');
const sprites = [
    './src/img/kaimo-001.png',
    './src/img/kaimo-002.jpg',
    './src/img/kaimo-003.png'
];
// 生成精灵表
Spritesmith.run({
    src: sprites
}, function handleResult(err, result) {
    // 如果有错误，抛出它
    if (err) {
        throw err;
    }
    console.log("result---->", result)
});

我们执行 node test.js

如果你报 Invalid file signature 错，可以参考我这篇文章：使用 spritesmith 报错 Error: Invalid file signature

然后我们输出到磁盘

const Spritesmith = require('spritesmith');
const fs = require('fs');
const path = require('path');
const sprites = [
    './src/img/kaimo-001.png',
    './src/img/kaimo-002.jpg',
    './src/img/kaimo-003.png'
];
// 生成精灵表
Spritesmith.run({
    src: sprites
}, function handleResult(err, result) {
    // 如果有错误，抛出它
    if (err) {
        throw err;
    }
    console.log("result---->", result)
    // 输出图片
    fs.mkdir('./dist', { recursive: true }, function(err) {
        if (err) throw err;
        console.log("目录创建成功");
        // 使用 fs.writeFileSync 将数据同步写入文件
        fs.writeFileSync(path.join(__dirname + '/dist/sprite.png'), result.image);
        console.log("输出图片完毕");
    });
});

然后执行 node test.js

然后可以看到 dist 目录生成了一个 sprite.png 图片

5、编写 sprite-loader

实现需要安装 loader-runner

npm i loader-runner

安装好之后添加 run-loader.js 文件

const fs = require("fs");
const path = require("path");
const { runLoaders } = require("loader-runner");
runLoaders(
    {
        resource: "./loaders/index.css",
        loaders: [
            path.resolve(__dirname, "./loaders/sprite-loader.js")
        ],
        context: {
            minimize: true
        },
        readResource: fs.readFile.bind(fs),
    },
    (err, result) => {
        err ? console.error(err) : console.log(result)
    }
);

然后在 loaders 文件夹添加图片跟 css 文件

.kaimo-bg-1 {
    background: url(./img/kaimo-001.png?__sprite);
}
.kaimo-bg-2 {
    background: url(./img/kaimo-002.jpg?__sprite);
}
.kaimo-bg-3 {
    background: url(./img/kaimo-003.png);
}

最后在 loaders 文件里添加 sprite-loader.js 文件

const Spritesmith = require('spritesmith');
const fs = require('fs');
const path = require('path');
module.exports = function(source) {
    const callback = this.async();
    console.log("source---->", source)
    // 配置所有需要合图的
    const imgs = source.match(/url\((\S*)\?__sprite/g);
    console.log("imgs-->", imgs)
    const sprites = [];
    // 遍历生成需要合图的图片路径
    for(let i = 0; i < imgs.length; i++) {
        const img = imgs[i].match(/url\((\S*)\?__sprite/)[1];
        console.log('img---->', img)
        sprites.push(path.join(__dirname, img));
    }
    console.log("sprites---->", sprites)
    // 生成精灵表
    Spritesmith.run({
        src: sprites
    }, function handleResult(err, result) {
        // 如果有错误，抛出它
        if (err) {
            throw err;
        }
        console.log("result---->", result)
        // 输出图片到 dist 文件夹
        fs.mkdir(path.join(process.cwd() + '/dist'), { recursive: true }, function(err) {
            if (err) throw err;
            console.log("目录创建成功");
            // 使用 fs.writeFileSync 将数据同步写入文件
            fs.writeFileSync(path.join(process.cwd(), 'dist/sprite.jpg'), result.image);
            console.log("图片输出完毕");
            // 然后替换 css 里的图片路径为雪碧图的路径
            source = source.replace(/url\((\S*)\?__sprite/g, (match) => {
                return `url("dist/sprite.jpg"`;
            })
            callback(null, source);
            fs.writeFileSync(path.join(process.cwd(), 'dist/index.css'), source);
            console.log("样式替换完毕");
        });
    });
}