Skip to content
This repository has been archived by the owner on Mar 17, 2023. It is now read-only.

Added ability to use additional optimizers #166

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 13 additions & 1 deletion README.md
Expand Up @@ -78,7 +78,15 @@ rules: [{
webp: {
quality: 75
}
}
},
additionalPlugins: [
{
plugin: 'imagemin-jpegtran',
options: {
progressive: true
}
}
]
},
],
}]
Expand All @@ -96,6 +104,10 @@ And optional optimizers:

- [webp](https://github.com/imagemin/imagemin-webp) — *Compress JPG & PNG images into WEBP*

And you may include additional imagemin plugins and their options by defining them in additionalPlugins. You must manually install each additional plugin as a node module before using it with image-webpack-loader.

[Plugins](https://www.npmjs.com/search?q=keywords:imageminplugin) to use.

_Default optimizers can be disabled by specifying `optimizer.enabled: false`, and optional ones can be enabled by simply putting them in the options_

If you are using Webpack 1, take a look at the [old docs](http://webpack.github.io/docs/using-loaders.html) (or consider upgrading).
Expand Down
9 changes: 8 additions & 1 deletion index.js
Expand Up @@ -37,8 +37,10 @@ module.exports = function(content) {
optipng: config.optipng || {},
svgo: config.svgo || {},
// optional optimizers
webp: config.webp || null
webp: config.webp || null,
additionalPlugins: config.additionalPlugins || []
};

// Remove in interlaced, progressive and optimizationLevel checks in new major version
if (config.hasOwnProperty('interlaced')) {
options.gifsicle.interlaced = config.interlaced;
Expand Down Expand Up @@ -75,6 +77,11 @@ module.exports = function(content) {
// optional optimizers
if(options.webp)
plugins.push(require('imagemin-webp')(options.webp));
// additional optimizers
options.additionalPlugins.forEach((plugin) => {
plugin.options = plugin.options || {};
plugins.push(require(plugin.plugin)(plugin.options));
});

imagemin
.buffer(content, {
Expand Down
7 changes: 5 additions & 2 deletions package.json
Expand Up @@ -13,23 +13,26 @@
"test:webpack2": "npm install -q webpack@2.x && npm run test:clean && webpack --config test/webpack2.config.js",
"test:webpack3": "npm install -q webpack@3.x && npm run test:clean && webpack --config test/webpack2.config.js",
"test:webpack4": "npm install -q webpack@4.x webpack-cli && npm run test:clean && webpack --config test/webpack4.config.js",
"test:webpack-additional": "npm install -q webpack@4.x webpack-cli@3.3.10 imagemin-jpegtran && npm run test:clean && webpack --config test/webpack-additional.config.js",
"test:clean": "rimraf test/public/assets",
"test": "npm run test:webpack1 && npm run test:webpack2 && npm run test:webpack3 && npm run test:webpack4"
},
"dependencies": {
"imagemin": "^5.3.1",
"imagemin-gifsicle": "^5.2.0",
"imagemin-jpegtran": "^6.0.0",
"imagemin-mozjpeg": "^7.0.0",
"imagemin-optipng": "^5.2.1",
"imagemin-pngquant": "^5.1.0",
"imagemin-svgo": "^6.0.0",
"imagemin-webp": "^4.1.0",
"loader-utils": "^1.1.0",
"object-assign": "^4.1.1"
"object-assign": "^4.1.1",
"webpack": "^4.41.2"
},
"devDependencies": {
"file-loader": "^1.1.11",
"rimraf": "^2.6.2",
"webpack-cli": "^2.1.3"
"webpack-cli": "^3.3.10"
}
}
88 changes: 88 additions & 0 deletions test/webpack-additional.config.js
@@ -0,0 +1,88 @@
'use strict';
var path = require('path');
var webpack = require('webpack');

var assetsPath = path.join(__dirname, 'public/assets');

var loaderOptions = {
mozjpeg: {
quality: 65
},
pngquant: {
quality: '65-90',
speed: 4
},
svgo: {
plugins: [
{
removeViewBox: false
},
{
removeEmptyAttrs: false
}
]
},
additionalPlugins: [
{
plugin: 'imagemin-jpegtran',
options: {
progressive: true
}
}
],
gifsicle: {
optimizationLevel: 7,
interlaced: false
},
optipng: {
optimizationLevel: 7,
interlaced: false
},
webp: {
quality: 75
}
};

var fileLoaderOptions = {
hash: 'sha512',
digest: 'hex',
name: '[hash].[ext]'
};

module.exports = [
{
mode: 'production',
entry: './test/app.js',
output: {
path: assetsPath,
filename: 'app.[hash].js'
},
module: {
rules: [
{
test: /.*\.(gif|png|jpe?g|svg|webp)$/i,
use: [
{
loader: 'file-loader',
options: fileLoaderOptions
},
{
loader: require.resolve('../'),
options: loaderOptions
}
]
},
{
test: /\.bmp$/i,
use: [
{
loader: 'file-loader',
options: fileLoaderOptions
},
require.resolve('../') // loaderUtils.getOptions() returns null for this one
]
}
]
}
}
];