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("样式替换完毕");});});
}

6、测试 sprite-loader.js 效果

运行命令 node run-loader.js，输出如下

然后我们查看一下 dist 目录，我们发现加了 __sprite 的样式被替换了

并且输出的 sprite.jpg 图片也是，只合成了加了的