说明
玩转 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
图片也是,只合成了加了的