npmpackage.info

Gathering detailed insights and metrics for image-webpack-loader

Other packages similar to image-webpack-loader

img-optimize-loader

1.0.7

Image webpack loader. Minify image, compress image, encode image(eg: base64) and inline image automaticlly. Support PNG, JPG, JPEG, GIF, WEBP, SVG.

asset-config-webpack-plugin

2.0.3

Preset for font and image webpack loader configurations

style-loader

4.0.0

style loader module for webpack

css-loader

7.1.2

css loader module for webpack

Gathering detailed insights and metrics for image-webpack-loader

image-webpack-loader

Image loader module for webpack

8.1.0

2,028

MIT

JavaScript

74,436,716 3.2

Installations

npm install image-webpack-loader

Pull Requests

Open

13

Total

258

Closed

148

Merged

97

Issues

Open

68

Total

184

Closed

116

Releases

Unable to fetch releases

Developer

tcoopman

Developer Guide

BETA

Module System

Unable to determine the module system for this package.

Min. Node Version

Typescript Support

No

Node Version

16.9.0

NPM Version

7.22.0 Statistics

2,028 Stars

330 Commits

132 Forks

16 Watching

14 Branches

38 Contributors

Updated on 20 Nov 2024

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

74,436,716

Last day

-16.8%

20,503

Compared to previous day

Last week

-7.9%

119,148

Compared to previous week

Last month

14%

550,882

Compared to previous month

Last year

-25%

8,202,053

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

DEPRECATED

please use: https://github.com/webpack-contrib/image-minimizer-webpack-plugin/

image-webpack-loader

Image loader module for webpack

Minify PNG, JPEG, GIF, SVG and WEBP images with imagemin

Issues with the output should be reported on the imagemin issue tracker.

Install

1$ npm install image-webpack-loader --save-dev

Install in container

`node:12-buster`

No additional preparations required. All dependencies will be compiled automatically.
Not recommended because of large image size (~1 GB).

`node:12-buster-slim`

Prepare script:

1apt-get update
2apt-get install -y --no-install-recommends autoconf automake g++ libpng-dev make

Recommended container image.

`node:12-alpine`

Prepare script:

1apk add --no-cache autoconf automake file g++ libtool make nasm libpng-dev

Not recommended because of long build time.

Benchmark

Container distro	Pull time	Build time	Total time
`node:12-buster`	42 seconds	77 seconds	119 seconds
`node:12-buster-slim`	11 seconds	103 seconds	114 seconds
`node:12-alpine`	8 seconds	122 seconds	130 seconds

libpng issues

Installing on some versions of OSX may raise errors with a missing libpng dependency:

Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib

This can be remedied by installing the newest version of libpng with homebrew:

1brew install libpng

Usage

Documentation: Using loaders

In your webpack.config.js, add the image-loader, chained after the file-loader:

1rules: [{
2  test: /\.(gif|png|jpe?g|svg)$/i,
3  use: [
4    'file-loader',
5    {
6      loader: 'image-webpack-loader',
7      options: {
8        bypassOnDebug: true, // webpack@1.x
9        disable: true, // webpack@2.x and newer
10      },
11    },
12  ],
13}]

For each optimizer you wish to configure, specify the corresponding key in options:

1rules: [{
2  test: /\.(gif|png|jpe?g|svg)$/i,
3  use: [
4    'file-loader',
5    {
6      loader: 'image-webpack-loader',
7      options: {
8        mozjpeg: {
9          progressive: true,
10        },
11        // optipng.enabled: false will disable optipng
12        optipng: {
13          enabled: false,
14        },
15        pngquant: {
16          quality: [0.65, 0.90],
17          speed: 4
18        },
19        gifsicle: {
20          interlaced: false,
21        },
22        // the webp option will enable WEBP
23        webp: {
24          quality: 75
25        }
26      }
27    },
28  ],
29}]

Comes bundled with the following optimizers, which are automatically enabled by default:

mozjpeg — Compress JPEG images
optipng — Compress PNG images
pngquant — Compress PNG images
svgo — Compress SVG images
gifsicle — Compress GIF images

And optional optimizers:

webp — Compress JPG & PNG images into WEBP

Each optimizers can be disabled by specifying optimizer.enabled: false, and optional ones can be enabled by simply putting them in the options

If you are using Webpack 1, take a look at the old docs (or consider upgrading).

Options

Loader options:

bypassOnDebug (all)

Type: boolean Default: false

Using this, no processing is done when webpack 'debug' mode is used and the loader acts as a regular file-loader. Use this to speed up initial and, to a lesser extent, subsequent compilations while developing or using webpack-dev-server. Normal builds are processed normally, outputting optimized files.

disable

Type: boolean Default false

Same functionality as bypassOnDebug option, but doesn't depend on webpack debug mode, which was deprecated in 2.x. Basically you want to use this option if you're running webpack@2.x or newer.

For optimizer options, an up-to-date and exhaustive list is available on each optimizer repository:

Inspiration

License

MIT (http://www.opensource.org/licenses/mit-license.php)

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

7

SAST

Determines if the project uses static code analysis.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

1

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.2

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to image-webpack-loader

image-webpack-loader

Installations

Pull Requests

13

258

148

97

Issues

68

184

116

Releases

Unable to fetch releases

Developer

tcoopman

Developer Guide

No

16.9.0

7.22.0

Statistics

Languages

Total Downloads

74,436,716

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

Optional Dependencies

DEPRECATED

image-webpack-loader

Install

Install in container

node:12-buster

node:12-buster-slim

node:12-alpine

Benchmark

libpng issues

Usage

Options

bypassOnDebug (all)

disable

Inspiration

License

10

10

10

7

2

1

0

0

0

0

0

0

0

3.2

/10

Other packages similar to image-webpack-loader

`node:12-buster`

`node:12-buster-slim`

`node:12-alpine`