Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tgallacher/kraken-loader
Kraken.io image optimisation loader for Webpack 2+
https://github.com/tgallacher/kraken-loader
image-processing kraken kraken-loader optimization webpack
Last synced: 23 days ago
JSON representation
Kraken.io image optimisation loader for Webpack 2+
- Host: GitHub
- URL: https://github.com/tgallacher/kraken-loader
- Owner: tgallacher
- License: mit
- Created: 2017-05-21T13:24:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-22T21:32:46.000Z (almost 7 years ago)
- Last Synced: 2024-05-28T00:04:21.795Z (9 months ago)
- Topics: image-processing, kraken, kraken-loader, optimization, webpack
- Language: JavaScript
- Homepage: https://www.npm.im/kraken-loader
- Size: 50.8 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
kraken-loader
===========
Image optmization loader for Webpack 2+ using [Kraken.io](https://kraken.io).
1. [Installation](#installation)
1. [Options](#options)
1. [Usage](#usage)
1. [Acknowledgements](#acknowledgements)
1. [LICENSE - MIT](#license---mit)
````
$ npm i -D kraken-loader
````
The loader supports the following options:
* `key` - your Kraken API Key
* `secret` - your Kraken API Secret
* `lossy` - enable/disable intelligent lossy optimization. Defaults to `true`
* `enabled` - enable/disable optimization using this loader. Defaults to `true`
* `silent` - enable/disable byte savings message. Defaults to `false`
The loader also supports supplying your API credentials using the following environment variables:
* `KRAKEN_LOADER_KEY` - Kraken API Key
* `KRAKEN_LOADER_SECRET` - Kraken API Secret
The environment variables offer a way to supply your API credentials without having to commit them to your VCS. This is the recommended method for supplying your Kraken.io API credentials.
It is expected that this plugin will be used alongside the [url-loader](https://github.com/webpack/url-loader), [file-loader](https://github.com/webpack/file-loader), or [raw-loader](https://github.com/webpack/raw-loader).
### Use with loader defaults
The following example requires your API credentials to be supplied using the supported environment variables (see [Options](#options)).
````js
module.exports = {
...
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name].[ext]'
}
},
'kraken-loader'
]
}
],
}
}
````
### Customising the loader config
```js
module.exports = {
...
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name].[ext]'
}
},
{
loader: 'kraken-loader',
options: {
enabled: process.env.NODE_ENV === 'production',
secret: 'my-api-secret',
silent: true,
lossy: true,
key: 'my-api-key'
}
}
]
}
]
}
}
```
Supplying your API credentials in the options object is optional. The options object can be used alongside the environment variables for specifying API credentials.
This plugin was inspired by the [gulp-kraken](https://github.com/kraken-io/gulp-kraken) plugin.