Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Images not optimized when using copy-webpack-plugin vs externalImages #114

Open
rlopzc opened this issue Jun 7, 2020 · 2 comments
Open

Comments

@rlopzc
Copy link

rlopzc commented Jun 7, 2020

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

@Giovancruz
Copy link

@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,
  },
})

@rlopzc
Copy link
Author

rlopzc commented Mar 22, 2021

No I didn't @Giovancruz and I didn't have the time to debug further

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants