How to use imagemin-webpack-plugin - 10 common examples
To help you get started, we’ve selected a few imagemin-webpack-plugin examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
AlexSergey / rocket-next / webpack.config.js View on Github 
webpackConfig.externals = {
'jsdom': 'window',
'cheerio': 'window',
'react/addons': true,
'react/lib/ReactContext': true,
'react/lib/ExecutionEnvironment': true
};
}
if (isProduction) {
webpackConfig.plugins.unshift(
new CleanWebpackPlugin([config.webpack.output.path]),
new ExtractTextPlugin("css/styles.css"),
new ImageminPlugin({
disable: false,
optipng: {
optimizationLevel: 3
},
gifsicle: {
optimizationLevel: 1
},
jpegtran: {
progressive: false
},
svgo: {
},
pngquant: null, // pngquant is not run unless you pass options here
plugins: []
}),this.extendBuild((config, { isDev }) => {
if (!isDev) {
// Add Imagemin plugin
config.plugins.push(
new ImageminPlugin({
test: /\.(jpe?g|png|gif|svg)$/i,
}),
);
}
});
};],
},
plugins: filter([
new CleanWebpackPlugin([buildPath]),
new CopyWebpackPlugin([{ from: path.resolve(srcPath, 'static'), to: buildPath }]),
new HtmlWebpackPlugin({
template: path.resolve(srcPath, 'template.html'),
hash: false,
filename: 'index.html',
inject: 'body',
minify: {
collapseWhitespace: true,
},
}),
new MiniCssExtractPlugin({ filename: __DEV__ ? '[name].css' : '[name].[contenthash].css' }),
__PROD__ && new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }),
__DEV__ && new webpack.HotModuleReplacementPlugin(),
new webpack.HashedModuleIdsPlugin(),
// new BundleAnalyzerPlugin(),
]),
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 128 * 1024,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('@', '')}`;// We don't want to install dev/optional deps into the client build.
// We only need those when building the client, not for runtime.
delete pkg.devDependencies;
delete pkg.optionalDependencies;
delete pkg.scripts;
return JSON.stringify(pkg);
},
},
{
from: 'update-hook.js',
to: 'update-hook.js',
},
]),
devNoop || serverNoop || new ImageminPlugin(),
prodNoop || serverNoop || new webpack.HotModuleReplacementPlugin(),
devNoop || serverNoop || new MiniCssExtractPlugin({
filename: section + '.[contenthash:8].css',
chunkFilename: section + '.[contenthash:8].css',
}),
devNoop || new OptimizeCssnanoPlugin({
cssnanoOptions: {
preset: [
'default',
{
mergeLonghand: false,
cssDeclarationSorter: false
}
]
}
}),const prodStart = () => {
baseWebpack.optimization = {
minimizer: [ new UglifyJsPlugin() ],
};
baseWebpack.plugins.push(new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }));
baseWebpack.plugins.push(new BundleAnalyzerPlugin({analyzerMode: 'disabled'}));
baseWebpack.plugins.push(new WebpackPwaManifest(webapp));
baseWebpack.plugins.push(new OfflinePlugin(sw));
};const prodStart = () => {
baseWebpack.optimization = {
minimizer: [ new UglifyJsPlugin() ],
};
baseWebpack.plugins.push(new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }));
baseWebpack.plugins.push(new BundleAnalyzerPlugin({analyzerMode: 'disabled'}));
baseWebpack.plugins.push(new WebpackPwaManifest(webapp));
baseWebpack.plugins.push(new OfflinePlugin(sw));
};this.extendBuild((config) => {
if (!this.options.dev) {
config.plugins.push(new ImageminPlugin(options))
}
})
}test: /\.(mp4|avi|mov)$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'videos/[name].[ext]?[hash]',
},
},
],
},
};
if (DEV) {
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
} else {
webpackConfig.plugins.push(
new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }),
new CopyWebpackPlugin([
{
from: path.join(__dirname, '../src/assets/images'),
to: 'images',
},
]),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: 'css/[id].css',
}),
new webpack.HashedModuleIdsPlugin()
);
}
return webpackConfig;
};short_name: options.appMeta.nickname || '',
description: options.appMeta.description || '',
background_color: options.appMeta.iconBackgroundColor || '#fff',
theme_color: options.appMeta.themeColor || '#fff',
crossorigin: 'anonymous',
includeDirectory: true,
icons: [{
src: options.appMeta.icon,
sizes: [72, 96, 128, 144, 192, 256, 384, 512]
}],
ios: true,
inject: true
}));
}
config.plugins = (config.plugins || []).concat([new InlineSourcePlugin()]).concat(manfiestPluginInstance).concat([new ImageminPlugin({
test: /\.(jpe?g|png|gif|svg)$/i
})]);
if (options.whitelist) {
whitelist(babelLoader, options.whitelist);
}
}
return config;
},
devServer: function devServer(configFunction) {short_name: options.appMeta.nickname || '',
description: options.appMeta.description || '',
background_color: options.appMeta.iconBackgroundColor || '#fff',
theme_color: options.appMeta.themeColor || '#fff',
crossorigin: 'anonymous',
includeDirectory: true,
icons: [{
src: options.appMeta.icon,
sizes: [72, 96, 128, 144, 192, 256, 384, 512]
}],
ios: true,
inject: true
}));
}
config.plugins = (config.plugins || []).concat([new InlineSourcePlugin()]).concat(manfiestPluginInstance).concat([new ImageminPlugin({
test: /\.(jpe?g|png|gif|svg)$/i
})]);
if (options.whitelist) {
whitelist(babelLoader, options.whitelist);
}
}
return config;
},
devServer: function devServer(configFunction) {imagemin-webpack-plugin
Webpack plugin to compress images
