1.0.3 • Published 5 years ago
@mara/image-loader v1.0.3
@mara/image-loader
A loader for webpack which compress png/svg/jpg images.
- Use
tinify
to compresspng
/jpg
- Cache tinify results
- Dynamic scheduling tinify keys
- Use
svgo
to compresssvg
Install
yarn add @mara/image-loader -D
Usage
webpack.config.js
With url-loader
:
module.exports = {
module: {
rules: [
{
test: /\.(bmp|png|jpe?g|gif|webp|svg)$/,
loader: require.resolve('url-loader'),
options: {
limit: 1024 * 4,
tinifyKeys: [tinify_key1, [...tinify_keyn]],
minify: process.env.NODE_ENV === 'production',
// use image-loader when a target file's size exceeds the limit
fallback: require.resolve('@mara/image-loader'),
name: `static/img/[name].[contenthash:8].[ext]`
}
}
]
}
}
Use alone:
module.exports = {
module: {
rules: [
{
test: /\.(bmp|png|jpe?g|gif|webp|svg)$/,
loader: require.resolve('@mara/image-loader'),
options: {
tinifyKeys: [tinify_key1, [...tinify_keyn]],
minify: process.env.NODE_ENV === 'production',
name: `static/img/[name].[contenthash:8].[ext]`
}
}
]
}
}
Options
Name | Type | Default | Description |
---|---|---|---|
name | string | 'hash.ext' | Custom filename template. See placeholders for details |
tinifyKeys | string[] | [] | Developer API keys from tinypng.com |
minify | boolean | true | Set false to disable compression, equivalent to file-loader |