tinypng for webpack or vue
npm install vue-tinypng-plugin适用于vue和webpack的tinypng插件,支持调整图片尺寸
能够根据记录判断资源是否发生改变,未改变时不会重复进行压缩
1.create tinypng.js
path: {your workspace}/tinypng.js
tinypng.js:
```
module.exports = {
key: "XXXX",
};
2.set key in options.config
``
new tinypngPlugin({
config: {
key: "XXXX",
}
})
module.exports = {
plugins: [
new tinypngPlugin()
]
};
`$3
`
configureWebpack: (config) => {
return {
plugins: [
new tinypngPlugin()
]
}
}
`配置属性/options
option.configName
config file name , no suffix
default "tinypng"配置文件名称
默认为"tinypng"
`
configName: ""
`option.cachePath
cache path
default ".tinypng"压缩记录缓存路径
默认为".tinypng",基于根目录
`
cachePath: ""
`option.cacheName
cache name
default "hash.json"压缩记录缓存文件名
默认为"hash.json"
`
cacheName: ""
`option.reg
compress img reg
default: /\.(png|jpe?g|bmp)/i需要压缩资源后缀的正则效验
默认: /\.(png|jpe?g|bmp)/i
`
reg: XXXX
`option.use
true/false run this plugin
default: true是否启动插件
默认: true
`
use: true/false,
`option.cache
Whether to record compressed cache
default: true是否启用缓存记录
默认: true
`
cache: true/false,
`option.config
option.config.key
your keytinypng的key
`
key:XXX,
`
option.config.method
resize method scale/fit/cover/thumb
look图片调整模式 支持:scale/fit/cover/thumb
详情参考
`
method: ""
`
option.config.width
resize asset width调整图片的宽度尺寸
`
width: ""
`option.config.height
resize asset height调整图片的高度尺寸
`
height: ""
``