使用 craco 覆盖框架默认的 webpack 配置
从前我以为 HTTP/2 开启以后,雪碧图可以逐渐退出舞台,现在感觉到自己的天真。且不论 svg 如果做成雪碧图可以通过 gzip 受益不少,多个单张的 png 还是比起一张要浪费请求。
// craco.config.js
const SpritesmithPlugin = require("webpack-spritesmith");
...
const templateFunction = function(data) {
const ratio = data.sprites[0].name.split("@")[1].split("x")[0] || 1;
// 2x 配置
let shared = ".ico { display: inline-block; background-image: url(I); background-size: Dpx Hpx; }"
.replace("I", data.sprites[0].image)
.replace("D", data.sprites[0].total_width / ratio)
.replace("H", data.sprites[0].total_height / ratio);
let perSprite = data.sprites
.map(function(sprite) {
let name = sprite.name.split("@")[0].replace(/_/g, "-");
return ".ico-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }"
.replace("N", name)
.replace("W", sprite.width / ratio)
.replace("H", sprite.height / ratio)
.replace("X", sprite.offset_x / ratio)
.replace("Y", sprite.offset_y / ratio);
})
.join("\n");
// mq 配置
let result = {
x2: `${shared}\n${perSprite}\n`, // 默认使用 2x
x3: `@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 2.25dppx) {\n${shared}\n${perSprite}\n}`
};
if (ratio != 3) {
return result.x2;
} else {
return result.x3;
}
};
...
// 注!以下配置大部分来自 https://www.chauncywu.com/?p=232
// 两套配置有很多重复的地方,应该不少也能提成统一的变量
const webpack = {
...
plugins: [
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, "public/assets/slice/2x"), // 图标根路径
glob: "*.png" // 图标类型
},
target: {
image: path.resolve(
__dirname,
"src/styles/img/sprite2x.png"
), // 生成雪碧图的名称和路径
css: [
[
path.resolve(
__dirname,
"src/styles/sprite2x.css"
),
{
// 生成CSS文件的名称和路径
format: "function_based_template" // 模板配置,注意在customTemplates中配置对应名称的属性名
}
],
[
path.resolve(
__dirname,
"src/styles/sprite2x.json"
),
{
// 生成json文件的名称和路径,想看图片数据的可以配置该项
format: "json_texture"
}
]
]
},
customTemplates: {
function_based_template: templateFunction // 上一项使用到的模板变量
},
apiOptions: {
cssImageRef: "./img/sprite2x.png" // 生成的CSS中引用的雪碧图路径
},
spritesmithOptions: {
algorithm: "binary-tree", // 生成的雪碧图图标排列方式
padding: 2 // 图标的间隔
}
}),
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, "public/assets/slice/3x"), // 图标根路径
glob: "*.png" // 图标类型
},
target: {
image: path.resolve(
__dirname,
"src/styles/img/sprite3x.png"
), // 生成雪碧图的名称和路径
css: [
[
path.resolve(
__dirname,
"src/styles/sprite3x.css"
),
{
// 生成CSS文件的名称和路径
format: "function_based_template" // 模板配置,注意在customTemplates中配置对应名称的属性名
}
],
[
path.resolve(
__dirname,
"src/styles/sprite3x.json"
),
{
// 生成json文件的名称和路径,想看图片数据的可以配置该项
format: "json_texture"
}
]
]
},
customTemplates: {
function_based_template: templateFunction // 上一项使用到的模板变量
},
apiOptions: {
cssImageRef: "./img/sprite3x.png" // 生成的CSS中引用的雪碧图路径
},
spritesmithOptions: {
algorithm: "binary-tree", // 生成的雪碧图图标排列方式
padding: 2 // 图标的间隔
}
})
]
}
// craco 的文件入口
module.exports = {
...
webpack
};
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。