bootstarted / sharp-loader Goto Github PK

Hey,
loving your loader. Super fast and easy to use. I'm just missing a few options.
I tried to add

jpeg: {
  progressive: true
}

but doesn't change anything. Would be great if that were exposed. Also since sharp prefers quality to be passed as a format specific option.

I've had luck using the plugin with Webpack 3, but that's just my use case. Is it safe to bump the Webpack engine version for now?

I'm working on a project in Gatsby and don't want to mess about with the canned webpack configuration it provides just to load a couple of images.

So I want to use this loader with an import line in the JS file alone, and configure it with query strings.

Is this possible?

So far I'm trying

import image from 'sharp-loader!./test.png?{"outputs":[{"format": "jpg"}]}'

I was hoping this would simply convert the PNG to a JPEG. Ideally I want to specify quality level and have it optimized too.

I'm getting

TypeError: Cannot read property 'context' of null
    at Object.module.exports ([...]/node_modules/sharp-loader/dist/sharp.js:232:29)

I'm currently working on a vue project and tried to translate your example config to chainWebpack syntax and include it in my vue.config.js.
This is what i came up with:

module.exports = {
  chainWebpack: config => {
    config.module
        .rule('resize-images')
        .test(/\.(gif|jpe?g|png|tiff)(\?.*)?$/)
        .use('sharp-loader')
            .loader('sharp-loader')
                .query()
                    .name('[name].[hash:8].[ext]')
                    .cacheDirectory(true)
                    .presets()
                        .thumbnail()
                            .format(['webp', 'jpeg'])
                            .width(200)
                            .quality(60)
                .end()
    }
}

Getting following error:

 ERROR  TypeError: config.module.rule(...).test(...).use(...).loader(...).query is not a function

I saw that other loaders in my webpack config used options: instead of
query: and i think thats the issue – i tried the following and got no more errors:

module.exports = {
  chainWebpack: config => {
    config.module
        .rule('resize-images')
        .test(/\.(gif|jpe?g|png|tiff)(\?.*)?$/)
        .use('sharp-loader')
            .loader('sharp-loader')
                .options()
                .end()
    }
}

I'm currently on [email protected].

Thank you for your work!

I think this version does not work with webpack 5. I have the following:

{
  test: /\.(gif|jpe?g|png|svg|tiff)(\?.*)?$/,
  include: [path.resolve(__dirname, 'src/photography')],
  loader: "sharp-loader",
  options: {
    name: "[name].[hash:8].[ext]",
    cacheDirectory: true,
    presets: {
      // Preset 1
      thumbnail: {
        format: ["webp", "jpeg"],
        width: 200,
        quality: 60,
      },
      // Preset 2
      prefetch: {
        // Format-specific options can be specified like this:
        format: { id: "jpeg", quality: 30 },
        mode: "cover",
        blur: 100,
        inline: true,
        size: 50,
      },
    },
  },
},
// Images: Copy image files to build folder
{ test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' }

import testImage from '../../photography/fullsizeoutput_203a.jpeg?{"outputs":["thumbnail"]}';

It appears the query parameters are ignored and the result of testImage is undefined. Is this something to do with the new asset modules?

Setting the quality option has no impact on filesize e.g. JPEGs

preset: {
  width: 300,
  quality: 50
}

Also the format syntax has no effect.

I'am using sharp: v0.21.3.

I'am getting a deprecation warning which should be related to sharp version:

(node:27161) DeprecationWarning: crop(position) is deprecated, use resize({ fit: "cover", position }) instead

I'am using sharp v0.21.3.

Add a query option emitFile, as present on file-loader, that disables the file emitting for building up for the server-side on a Universal/Isomorphic environment.

related with webpack-contrib/file-loader#74

This would allow the user full access to sharp transformations, and would even allow the use of third party transformations (openCV, for instance).

Hi all, I am trying to optimize my media assets with webpack, I use image-minimizer-webpack-plugin to optimize the quality.

I looked for a plugin that generates thumbnails and found this (only) one.

• Does these two plugins work together or is it a replacement?
• What does "automatically generate image assets " means?

This could enable the ability to add different output formats not normally supported by sharp.

One may generate e.g. a favicon with: https://github.com/steambap/png-to-ico/blob/master/index.js