kavu / webp-loader Goto Github PK

View Code? Open in Web Editor NEW

92.0 4.0 17.0 2.98 MB

WebP image loader & converter for Webpack

License: MIT License

JavaScript 96.36% Shell 3.64%

webp loader webpack

webp-loader's Introduction

webp-loader

WebP image loader & converter loader for Webpack.

Install

npm install webp-loader --save-dev

Usage

Here is the example of using webp-loader along with common file-loader:

loaders: [
  {
    test: /\.(jpe?g|png)$/i,
    loaders: [
      'file-loader',
      'webp-loader'
    ]
  }
]

Unfortunately, if you wish to pass an options for internal imagemin-webp you should pass a options in JSON form:

loaders: [
  {
    test: /\.(jpe?g|png)$/i,
    loaders: [
      'file-loader',
      'webp-loader?{quality: 13}'
    ]
  }
]

Normally you don't want to convert all of your images to WebP format, you just want to make alternate versions. You can use multi-loader to achieve it:

loaders: [
  {
    test: /\.(jpe?g|png)$/i,
    loader: multi(
      'file-loader?name=[name].[ext].webp!webp-loader?{quality: 95}'
      'file-loader?name=[name].[ext]',
    )
  },
]

Options

For all possible options please visit "API" section of the official imagemin-webp README.

Inspiration

webp-loader is heavily inspired by tcoopman/image-webpack-loader.

License

MIT

webp-loader's People

Contributors

Stargazers

Watchers

Forkers

ycr6708536 brandonxiang fossabot goodmanforweb chikara-chan rf-toothpic mole-inc lilililee tofandel alexcbz mogyuchi pysco68 lohn disclaimer8 gingerminds scarlatum scofield-ua

webp-loader's Issues

Generate both images (jpg/png and webp) with hash.

Hi,

I'm trying to generate alternate versions for my images, which is working fine. However, when I'm trying add hashes , I'm getting a problem.

I'm using part of code from README but adding [hash] placeholder

loaders: [
  {
    test: /\.(jpe?g|png)$/i,
    loader: multi(
      'file-loader?name=[name].[hash].webp!webp-loader?{quality: 95}'
      'file-loader?name=[name].[hash].[ext]',
    )
  },
]

Which is working, but generating different hashes

So output will be:

image.12345.jpg
image.67890.webp

Can I somehow generate img's with same hashes, like this:

image.12345.jpg
image.12345.webp

Thanks

Dangerous vulnerability in dependency

Hey, thanks for creating this package!

The npm audit just alerted me that the "decompress" package suffers a Arbitrary File Write vulnerability: https://www.npmjs.com/advisories/1217. It is used by the imagemin dependencies in this plugin.

Would be nice if you could take a look.
Greetings, Fabian

error


ERROR in ./~/vue-loader/lib/template-compiler?{"id":"data-v-f87c58e0"}!./~/vux-loader/src/before-template-compiler-loader.js!./~/vux-loader/src/template-loader.js!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue
Module not found: Error: Can't resolve 'webp' in '/Users/vivo/Documents/vscode_workspace/quick_start/vue/member_mobile'
 @ ./~/vue-loader/lib/template-compiler?{"id":"data-v-f87c58e0"}!./~/vux-loader/src/before-template-compiler-loader.js!./~/vux-loader/src/template-loader.js!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue 4:13-41
 @ ./src/App.vue
 @ ./src/main.js

Is there any update plans?

imagemin is updated in version 7, and drop supporting Node.js 6.
Please let us know if you plan to update.

readme shouldn't recommend multiloader

README shouldn't recommend multiloader because multiloader is deprecated.

Build errors on webpack with NextJS

$ next build
Loaded env from /home/ubuntu/repositories/ecommerce/.env
info  - Using external babel configuration from /home/ubuntu/repositories/ecommerce/.babelrc
info  - Creating an optimized production build 
Failed to compile.

./src/assets/images/home/abcde.jpg?webp
Error: /home/ubuntu/repositories/ecommerce/node_modules/cwebp-bin/vendor/cwebp: error while loading shared libraries: libGL.so.1: cannot open shared object file: No such file or directory
    at runMicrotasks (<anonymous>)


> Build error occurred
Error: > Build failed because of webpack errors
    at /home/ubuntu/repositories/ecommerce/node_modules/next/dist/build/index.js:15:918
    at async /home/ubuntu/repositories/ecommerce/node_modules/next/dist/build/tracer.js:1:525
error Command failed with exit code 1.

Testing

It will be good to add TravisCI for testing and show status in README

Query options are ignored in version 0.2.0

When i set

module: {
    rules: [
        {
            test: /\.(png|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: { 'limit': 8192 }
                },
                {
                    loader: 'webp-loader',
                    options: { lossless: true, quality: 90 }
                }
            ]
        }
    ]
}

loader's options are ignored

warning " > [email protected]" has unmet peer dependency "webpack-cli@*".