🌕当前是一个简单的雪碧图的 loader.
✨测试文档地址：https://github.com/soGooday/test-cssprite-loader
To begin, you'll need to install cssprite-loader:
npm install --save-dev cssprite-loader此loader依赖于spritesmith，所以记得安装
npm install --save-dev spritesmith
module:{
rules:[{
test:/\.scss\$/,
exclude: /node_modules/,
use:[{
loader: 'style-loader',
},{
loader:'css-loader',
},{
loader: 'cssprite-loader',//放在要比css-loader先一步执行的位置
options: {
filename: "cssprite", //需要存放的雪碧图的文件名称CSS Sprites
padding: 2,//每张素材的间隙
algorithm: 'binary-tree',//打成雪碧图的算法 🏳️🌈layout
imgType: ['png', 'jpg', 'jpeg'],//能够打成雪碧图的素材类型 直接使用作为正则的匹配
htmlFontSize:20,//html的font-size值是多少 用于rem的适配
imageRatio:2,//使用的是几倍图的素材
defaultType:'png',//不同类型图片被打包成为同一张雪碧图,此时被合成的雪碧图类型。建议png
}
},{
loader: 'sass-loader',//泛指css预编译器 可有可无
}],
}]
}🤷top-down: 上-下 🤷🏻left-right: 左-右 🤷🏼diagonal: 对角线 🤷🏽alt-diagonal: 对角线居中 🤷🏾binary-tree: 居中
🚄More information can be found in the layout documentation: layout➡️https://github.com/twolfson/layout
.image1{
width:100px,
height:100px,
background-image: url(/sitelet?url=https%3A%2F%2Fgithub.com%2FsoGooday%2F.%253Cspan%2520class%3D%2522pl-c1%2522%253E%2F%253C%2Fspan%253Eimages%253Cspan%2520class%3D%2522pl-c1%2522%253E%2F%253C%2Fspan%253Ea.png%3Fsp_1);
}
.image2{
width:100px,
height:100px,
background-image: url(/sitelet?url=https%3A%2F%2Fgithub.com%2FsoGooday%2F.%253Cspan%2520class%3D%2522pl-c1%2522%253E%2F%253C%2Fspan%253Eimages%253Cspan%2520class%3D%2522pl-c1%2522%253E%2F%253C%2Fspan%253Ed.png%3Fsp_1);
}
.image3{
width:100px,
height:100px,
background-image: url(/sitelet?url=https%3A%2F%2Fgithub.com%2FsoGooday%2F.%253Cspan%2520class%3D%2522pl-c1%2522%253E%2F%253C%2Fspan%253Eimages%253Cspan%2520class%3D%2522pl-c1%2522%253E%2F%253C%2Fspan%253Eb.jpg%3Fsp_2);
}
.image4{
width:100px,
height:100px,
background-image: url(/sitelet?url=https%3A%2F%2Fgithub.com%2FsoGooday%2F.%253Cspan%2520class%3D%2522pl-c1%2522%253E%2F%253C%2Fspan%253Eimages%253Cspan%2520class%3D%2522pl-c1%2522%253E%2F%253C%2Fspan%253Ec.jpg%3Fsp_2);
}🌘其中的?是标识符,通过?与指定的文件类型进行适配。找到到?切?之后携带的文本，作为雪碧图的名字。如上会创建两个雪碧图 🌗雪碧图sp_1：d.png与a.png组成， 🌖雪碧图sp_2：d.png与a.png组成， 🌕雪碧图会被放在cssprite文件夹下，最后图片的打包交给图片相关的loader处理就好