Klathmon
Images not optimized when using copy-webpack-plugin vs externalImages
I was testing if the images where indeed optimized and I found that the output is different from using externalImages and copy-webpack-plugin
I though all the images that I use via copy webpack plugin were automatically optimized
Using copy webpack:
new CopyWebpackPlugin({
patterns: [
{ from: 'src/assets/images', to: 'assets/images' },
{ from: 'src/assets/media', to: 'assets/media' },
{ from: 'src/version.txt', to: 'version.txt' },
] }),
new ImageminPlugin({
test: /\.(jpe?g|png|gif|svg)$/i,
}),
Using externalImages:
new CopyWebpackPlugin({
patterns: [
{ from: 'src/version.txt', to: 'version.txt' },
] }),
new ImageminPlugin({
test: /\.(jpe?g|png|gif|svg)$/i,
externalImages: {
context: 'src',
sources: glob.sync('src/**/*.+(png|jpg|gif|svg)'),
destination: 'dist/',
fileName: '[path][name].[ext]',
},
}),
Aren't they supposed to have the same behaviour?
More info: I'm not importing/including the images in JS or anything, but I need them available in the specified folder
@romariolopezc have you fixed this? I'm having the same trouble.
In my case, I'm fixed the copy using external, they are copied and optimized but ignoring my definitions on plugins like SVGO, where optimzation are removing viewbox even though I set it to false:
new ImageminPlugin({
externalImages: {
context: 'src',
sources: glob.sync(source + '/src/images/**/*.{jpeg,jpg,png,gif,svg}'),
destination: source + '/dist/',
fileName: (filePath) => {
filePath = filePath.slice(filePath.lastIndexOf('/images') + 1);
return filePath;
}
},
gifsicle: { optimizationLevel: 3, interlaced: true },
jpegtran: { quality: 100, progressive: true },
optipng: { optimizationLevel: 3, interlaced: true },
svgo: {
removeAttrs: { attrs: 'data.*' },
removeRasterImages: true,
removeOffCanvasPaths: true,
removeDimensions: false,
removeViewBox: false,
prefixIds: {
prefixIds: false,
prefixClassNames: true,
},
addClassesToSVGElement: "icon",
removeStyleElement: true,
removeScriptElement: true,
removeXMLNS: true,
convertPathData: false,
},
})
