tinypng-plugin-webpack-full-featured v1.2.2
Tinypng Plugin for Webpack Full Featured
This is a simple plugin that uses Tinypng to compress images in your project.
Install
npm install tinypng-plugin-webpack-full-featured
Example Usage
const TinypngPlugin = require('tinypng-plugin-webpack-full-featured');
module.exports = {
plugins: [
new TinypngPlugin({
from: path.resolve(__dirname, '../static/images'),
extentions: ['png', 'jpeg', 'jpg'],
silent: false,
cache: true,
}),
],
};
Working with copy-webpack-plugin:
module.exports = {
plugins: [
new TinypngPlugin({
from: path.resolve(__dirname, '../static/images'),
extentions: ['png', 'jpeg', 'jpg'],
silent: false,
cache: true,
}),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: path.resolve(__dirname, '../dist/static'),
ignore: ['.*'],
},
]),
],
};
Note the order of the plugins matters. If you want to compress before, the from
option should be the original path. But if you want it after, this from
option should be the destination path.
API
new TinypngPlugin(options)
options.disable
type: Boolean
default: false
If we are not in production mode, we may not want to compress images.
module.exports = {
plugins: [
new TinypngPlugin({
from: path.resolve(__dirname, '../static/images'),
extentions: ['png', 'jpeg', 'jpg'],
silent: false,
cache: true,
disable: process.env.NODE_ENV !== 'production',
}),
],
};
options.from (required
)
type: String
default: {your project}
The directory to compress images. Currently, we only dig 2 levels, which means {your project}/**.png
and {your project}/**/**.png
.
options.extentions
type: Array
default: ['png', 'jpeg', 'jpg']
Passes image type. Types like .gif
or .svg
is not supported.
options.silent
type: Boolean
default: false
Whether we show compressing result or not.
options.cache
type: Boolean
default: true
We use filepath and size to distinct images status. If we set it to false, images will always be compressed.
options.cacheLocation
type: String
default: {your project}/node_modules/tinypng-plugin-webpack-full-featured/dict
Location we save cache. If we set it to node_modules, team members would compress images again and again. So it is recommended that we set it to somewhere git included.
FAQ
Why? I was suprised that there weren't any Tinypng plugins for webpack which fit my request, so I made one!
Why not use tinypng-webpack-plugin? Because the images need to preceed is not in webpack assets. And it is quite slow.
Why not use tinypng-loader? Because it is lack of silence option and it cannot proceed images not in webpack assets as well.
Can you add this new feature? Sure. If the feature make sense, I would add it. And please understand that I need to keep it simple, so not all feature would be proved.
Inspiration
- Many thanks to tinypng-webpack-plugin, tinypng-loader and imagemin-webpack-plugin.
Contributing
- The code is written in ES6 using Javascript Standard Style.
- Please have PRs be single-purpose and try to stick to the coding style that the plugin uses.
- Keep new features easily testable.
- Documentation PRs are more than welcome! I'm really bad at words and things, so any improvement there is always a good thing!
License
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago