demoorjasper / parcel-plugin-imagemin

Parcel image minification plugin

parcel-plugin-imagemin

A parcel plugin for image minification

Affected image formats

Currently supported extensions are .jpg, .jpeg, .png, .gif, .svg

Installation

yarn add parcel-plugin-imagemin -D

or

npm install parcel-plugin-imagemin -D

Usage

Image minification is only done on production builds so parcel build ..., this to improve rebuild speeds in dev mode (the imagemin data is cached so it should be pretty quick in prod as well)

Configuration

Configuration file used by this plugin is imagemin.config.js

module.exports = {
  "gifsicle": { "optimizationLevel": 2, "interlaced": false, "colors": 10 },
  "mozjpeg": { "progressive": true, "quality": 10 },
  "pngquant": { "quality": [0.25, 0.5] },
  "svgo": {
    "plugins": [
      { "removeViewBox": false },
      { "cleanupIDs": true },
    ]
  },
  "webp": { "quality": 10 }
}

See imagemin's API for further information: https://github.com/imagemin

License

MIT License

parcel-plugin-imagemin's Issues

Plugin generate js files

Hi, I use this plugin. I have one problem, plugin generate 2 files, one new image file and second with same filename but js file. I have zero configuration.
Example:
bg.23124bf0.png, bg.23124bf0.js

Require issue after install

I installed parcel-plugin-imagemin and after this I've been seeing a lot of errors like what I have pasted below. Before I installed the plugin, my images were loading without any issues, using the same code.

Uncaught Error: Cannot find module 'src/assets/aboutIcon.png'
    at newRequire (goAheadAcademyFrontend.e31bb0bc.js:37)
    at newRequire (goAheadAcademyFrontend.e31bb0bc.js:21)
    at localRequire (goAheadAcademyFrontend.e31bb0bc.js:53)
    at About.render (About.js:59)
    at finishClassComponent (react-dom.development.js:17160)
    at updateClassComponent (react-dom.development.js:17110)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.render (react-dom.development.js:24840)
    at Object.parcelRequire.index.js.react (index.js:4)
    at newRequire (goAheadAcademyFrontend.e31bb0bc.js:47)
    at localRequire (goAheadAcademyFrontend.e31bb0bc.js:53)
    at bundle-loader.js:80

Here is my package.json:

{
  "dependencies": {
    "@babel/polyfill": "^7.10.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "classnames": "^2.2.6",
    "email-validator": "^2.0.4",
    "polished": "^3.6.5",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-modal": "^3.11.2",
    "react-router-dom": "^5.2.0",
    "react-router-hash-link": "^2.0.0",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.11.0",
    "@babel/preset-react": "^7.10.4",
    "@storybook/addon-actions": "^6.0.10",
    "@storybook/addon-essentials": "^6.0.10",
    "@storybook/addon-links": "^6.0.10",
    "@storybook/react": "^6.0.10",
    "babel-loader": "^8.1.0",
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-imagemin": "^4.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-modal": "^3.11.2",
    "react-router-dom": "^5.2.0",
    "react-router-hash-link": "^2.0.0",
    "styled-components": "^5.1.1"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html --public-url ./",
    "storybook": "start-storybook -p 6006 -s dist",
    "build-storybook": "build-storybook"
  }
}

My render function contains:

                  <img
                    src={require("../assets/aboutIcon.png")}
                    className="about-icon-img"
                    alt="about-icon-img"
                  />

Here is my folder structure:

npm audit

                       === npm audit security report ===                        
                                                                                
┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-gifsicle > gifsicle >      │
│               │ bin-build > decompress > vinyl-fs > glob-stream > micromatch │
│               │ > braces                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-gifsicle > gifsicle >      │
│               │ bin-build > download > gulp-decompress > decompress >        │
│               │ vinyl-fs > glob-stream > micromatch > braces                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-gifsicle > gifsicle >      │
│               │ bin-build > download > vinyl-fs > glob-stream > micromatch > │
│               │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-gifsicle > gifsicle >      │
│               │ bin-wrapper > download > gulp-decompress > decompress >      │
│               │ vinyl-fs > glob-stream > micromatch > braces                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-gifsicle > gifsicle >      │
│               │ bin-wrapper > download > vinyl-fs > glob-stream > micromatch │
│               │ > braces                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-mozjpeg > mozjpeg >        │
│               │ bin-build > decompress > vinyl-fs > glob-stream > micromatch │
│               │ > braces                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-mozjpeg > mozjpeg >        │
│               │ bin-build > download > gulp-decompress > decompress >        │
│               │ vinyl-fs > glob-stream > micromatch > braces                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-mozjpeg > mozjpeg >        │
│               │ bin-build > download > vinyl-fs > glob-stream > micromatch > │
│               │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-mozjpeg > mozjpeg >        │
│               │ bin-wrapper > download > gulp-decompress > decompress >      │
│               │ vinyl-fs > glob-stream > micromatch > braces                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-mozjpeg > mozjpeg >        │
│               │ bin-wrapper > download > vinyl-fs > glob-stream > micromatch │
│               │ > braces                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-pngquant > pngquant-bin >  │
│               │ bin-wrapper > download > gulp-decompress > decompress >      │
│               │ vinyl-fs > glob-stream > micromatch > braces                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-pngquant > pngquant-bin >  │
│               │ bin-wrapper > download > vinyl-fs > glob-stream > micromatch │
│               │ > braces                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-webp > cwebp-bin >         │
│               │ bin-build > decompress > vinyl-fs > glob-stream > micromatch │
│               │ > braces                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-webp > cwebp-bin >         │
│               │ bin-build > download > gulp-decompress > decompress >        │
│               │ vinyl-fs > glob-stream > micromatch > braces                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-webp > cwebp-bin >         │
│               │ bin-build > download > vinyl-fs > glob-stream > micromatch > │
│               │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-webp > cwebp-bin >         │
│               │ bin-wrapper > download > gulp-decompress > decompress >      │
│               │ vinyl-fs > glob-stream > micromatch > braces                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-webp > cwebp-bin >         │
│               │ bin-wrapper > download > vinyl-fs > glob-stream > micromatch │
│               │ > braces                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Memory Exposure                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ tunnel-agent                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.6.0                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-gifsicle > gifsicle >      │
│               │ bin-build > download > caw > tunnel-agent                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/598                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Memory Exposure                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ tunnel-agent                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.6.0                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-gifsicle > gifsicle >      │
│               │ bin-wrapper > download > caw > tunnel-agent                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/598                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Memory Exposure                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ tunnel-agent                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.6.0                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-mozjpeg > mozjpeg >        │
│               │ bin-build > download > caw > tunnel-agent                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/598                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Memory Exposure                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ tunnel-agent                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.6.0                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-mozjpeg > mozjpeg >        │
│               │ bin-wrapper > download > caw > tunnel-agent                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/598                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Memory Exposure                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ tunnel-agent                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.6.0                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-pngquant > pngquant-bin >  │
│               │ bin-wrapper > download > caw > tunnel-agent                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/598                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Memory Exposure                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ tunnel-agent                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.6.0                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-webp > cwebp-bin >         │
│               │ bin-build > download > caw > tunnel-agent                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/598                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Memory Exposure                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ tunnel-agent                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.6.0                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ parcel-plugin-imagemin [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ parcel-plugin-imagemin > imagemin-webp > cwebp-bin >         │
│               │ bin-wrapper > download > caw > tunnel-agent                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/598                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 24 vulnerabilities (17 low, 7 moderate) in 909838 scanned packages
  24 vulnerabilities require manual review. See the full report for details.

The picture will appear undefined

The picture will appear undefined, I use parcel in the VsCode and then install the plug-in, the picture in the dist, open the display undefined, or directly open the display picture error.

{
"name": "vueproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html --no-source-maps --public-url ."
},
"alias": {
"vue": "./node_modules/vue/dist/vue.common.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.5.16",
"vue-hot-reload-api": "^2.3.0"
},
"devDependencies": {
"@vue/component-compiler-utils": "^1.3.1",
"autoprefixer": "^8.6.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-vue": "^2.0.2",
"cssnano": "^3.10.0",
"node-sass": "^4.9.0",
"parcel-bundler": "^1.8.1",
"parcel-plugin-imagemin": "^1.1.1",
"postcss-modules": "^1.1.0",
"precss": "^3.1.2",
"vue-template-compiler": "^2.5.16"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8",
"iOS >= 7",
"Android > 4.1"
]
}

node:v10.2.0
npm:6.1.0
os:win10

Missing libpng16.so.16

I just ran the example and it showed an error at the jpeg file,
(executed : ./node_modules/.bin/parcel build example/index.html)

🚨 Error in file: parcel-plugin-imagemin/example/pexels-image.jpeg

Command failed: parcel-plugin-imagemin/example/node_modules/mozjpeg/vendor/cjpeg -quality 50
parcel-plugin-imagemin/example/node_modules/mozjpeg/vendor/cjpeg: error while loading shared libraries: libpng16.so.16: cannot open shared object file: No such file or directory

getConfig is undefined

Animated webp support

(I know this issue shouldn't be posted in this repository, however imagemin-webp seemed to be no longer develping. )

Animated webp will be supported?

Doesn't work with glob requires?

I load all my png images like this,

const images = require('../assets/images/projects/**/*.png');

and it works. So I wanted to compress them also and I added parcel-plugin-imagemin and now I get this error in the console and nothing seems to load,

Unhandled Promise Rejection: Error: Cannot find module 'assets/images/projects/Numberz/app1.png'

It seems the plugin doesn't respect relative paths I think.

Directory structure is here: https://github.com/pyros2097/website/tree/master/assets/images/projects

parcel-bundler: "^1.12.4"

Take advantage of caching

Only assets seems to be cached. As the minification here happens on the packager, it is always processed again, even when the source didn't change.

Is it possible to add in plugin imagemin ability to transfrom images to .webP

Hi imagemin have good additional plugin for genereting webp images.

Is it possible to implement this ability to parcel-plugin-imagemin ?

Something like this ↓

`const ImageAsset = require('./ImageAsset');

// Imagemin
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminWebp = require("imagemin-webp");

class JpgAsset extends ImageAsset {
async packageImage(options, location) {
const params = options && options.mozjpeg ? options.mozjpeg : { quality: 75 };
return imagemin([location], {
plugins: [imageminMozjpeg(params), imageminWebp({quality: 75})]
});
}
}

module.exports = JpgAsset;
`

Parcel v2 / Transformer version

Is there a transformer based version planned for the parcel v2 release?

Threw the following error: Error: Cannot find module 'parcel-bundler\src\utils\config'

Screenshot of the error:

Folder Structure:

Config file:

minimize images from static folder

I'm using parcel with parcel-plugin-static-files-copy and store a set of images in the static dir that are loaded dynamically.
Looks like the parcel-plugin-imagemin does not pick these up. Is there a way to specify an extra source directory?

Additional configuration options

🙋 feature request

imagemin.config.js currently supports only the quality param:

module.exports = {
  "quality": 50
};

🤔 Expected Behavior

Since the plugin uses gifsicle, mozjpeg, etc. to minify the images, then it should provide an api to configure them.

😯 Current Behavior

Only quality can be configured.

💁 Possible Solution

Allow other options to be specified, for each minifier.

🔦 Context

It's impossible to disable SVGs viewbox stripping (there was an issue in parcel's repo) or enabling interlacing/progressive options in GIFs/JPEGs

💻 Examples

module.exports = {
  "gifsicle": { "optimizationLevel": 1, "interlaced": true },
  "mozjpeg": { "progressive": true, "quality": 50 },
  "pngquant": { "quality": 50 },
  "svgo": [
    { "removeViewBox": true },
    { "cleanupIDs": false }
  ]
};

I'll try and submit a PR asap.

Can we specify "imagemin"."quality" in package.json?

Will this work?
i.e. in package.json

"imagemin": {
  "quality": 50
}

Issues with non-asset images

Hi Jasper, while creating an issue in Parcel's repo I bumped into an issue with the plugin. Using a simple index.html with 2 images: while the other is an href (am I the only one displaying fullscreen images and using Parcel ? 😢).

Is this because the plugin assumes that images will be hashed ? But since one is an entrypoint, it will be copied as-is.

Error message:

Server running at http://localhost:1234
× ENOENT: no such file or directory, open 'C:\path\parcel-plugin-imagemin-18\dist\images\gallery\foo.jpeg'
Error: ENOENT: no such file or directory, open 'C:\path\parcel-plugin-imagemin-18\dist\images\gallery\foo.jpeg'

Repro: https://github.com/bre7/parcel-plugin-imagemin-18

mozjpeg install fails

Running 'npm i' in the current master branch tells me that mozjpeg binary fails to run properly and goes onto compile it and initially it stopped saying 'autoreconf' was not found and I just installed autoconf but it stops here. This is perhaps mozjpeg's problem.

[email protected] postinstall parcel-plugin-imagemin/node_modules/mozjpeg
node lib/install.js

⚠ The parcel-plugin-imagemin/node_modules/mozjpeg/vendor/cjpeg binary doesn't seem to work correctly
⚠ mozjpeg pre-build test failed
ℹ compiling from source
✖ Error: autoreconf -fiv && ./configure --disable-shared --disable-dependency-tracking --with-jpeg8 --prefix="parcel-plugin-imagemin/node_modules/mozjpeg/vendor" --bindir="parcel-plugin-imagemin/node_modules/mozjpeg/vendor" --libdir="parcel-plugin-imagemin/node_modules/mozjpeg/vendor" && make -j1 && make install -j1
Command failed: autoreconf -fiv
autoreconf: Entering directory `.'
autoreconf: configure.ac: not using Gettext
autoreconf: running: aclocal --force
autoreconf: configure.ac: tracing
autoreconf: configure.ac: not using Libtool
autoreconf: running: /usr/bin/autoconf --force
configure.ac:23: error: possibly undefined macro: AC_PROG_LIBTOOL
If this token and others are legitimate, please use m4_pattern_allow.
See the Autoconf documentation.
autoreconf: /usr/bin/autoconf failed with exit status: 1

at ChildProcess.exithandler (child_process.js:275:12)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at maybeClose (internal/child_process.js:925:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

Software	Version(s)
Parcel	1.5.1
Node	8.9.4
npm	5.6.0
Operating System	Ubuntu 16.04.3

bundler.addAssetType alternatives

Is bundler.addAssetType the only way ? What happens if 2 or more plugins add the same asset type ? Only one will be actually executed

Asset size of minified images are reported in build stats as 0 B during build

Files are successfully minified but file size is incorrectly reported.

Side note but unrelated: It would be great to see the "savings" from compression.

Wrong destination for .gif files on parcel build

Hi,
When running parcel build only my .gif files goes to the /dist folder instead /dist/img/ like all others images (jpeg, png, svg…) that I tested.

I created a repo for the issue with of all my config: https://github.com/yoanmalie/imagemin-parcel-bug

Step:

• Add files to /src/img/ and call them in the index.html:
  <img src="./img/file-name.gif">.
• Run npm run build

Versions:
macOS 10.14.6
node 10.17.0
npm 6.12.0
parcel 1.12.4

Not optimizing the images

I am not sure if I configured it right.
After testing with a normal jpg image, it outputs the exact same image despite the configuration.
Normally installed th pack with npm; Inserted the img tag with it's url inside index.html; created the imagemin.config.js file with the readme example. However, no results.
I am missing something or this can actually be an issue?

Images get larger and don't load in dev mode, works fine on build

I saw this behavior on my project but to make sure I wasn't crazy I cloned this repo and tried the example folder.

yarn run clean-build completes with no errors. yarn start makes images in the dist folder that are larger than the original (ex: parcel.png went from 204kb to 356kb) and they don't appear to be images. They are binary, but they won't load in the browser or for image preview on the desktop. No errors, just bad image files.

yarn run build and the images are minified and load fine.

I can't see a different path in your code based on dev vs build, so I don't know what to suggest. I'd say it's a personal problem with my GCC compiled image handlers (I'm on Arch linux) but since the build step produces good images...beats me.

Thanks in advance for any suggestions you could provide!

Default quality level without imagemin.config.js?

Is it possible to set it to 100 by changing,

 let quality = config.quality || 100;

to

 let quality = config && config.quality || 100;

?

warning

warning parcel-plugin-imagemin > imagemin-gifsicle > gifsicle > bin-wrapper > download > gulp-decompress > [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

Does the parcel-plugin-imagemin work?

Hi, I found your plugin on the Internet. And I wanted to use it in my project. I read the documentation, but the plugin doesn't work.

Here are my steps:

1. I installed the plugin for parcel (before that parsel was installed, it works).

2. I created a "imagemin.config.js" in the root of the project.
   This is structure of my project:
   StaffMonitoring/
|---> src/
|---> dist/
|---> package.json
|---> package-lock.json
|---> imagemin.config.js

3. I used command npm build run and I expect to see compressed images in the folder "dist", but there are images without compression.

Tell me, please, what is my mistake?

`asset.package` is deprecated. Please use `await asset.getPackage()` instead.

parcel-plugin-imagemin/lib/assets/ImageAsset.js

Lines 15 to 17 in 12ecc86

	if (this.options.minify) {
	let config = this.package.imagemin || (await this.getConfig(['imagemin.config.js']));
	let quality = config && config.quality ? config.quality : 100;

I just updated parcel-bundler to ver 1.9.0. And I got the warning.

Looks like this warning appears on line 16 of ImageAsset.js: this.package.imagemin.

Adds a .js file for each image

I don't know if this is intended, but when adding the plugin i get a .js file for each image that is processed. Those files end up linked in the <head> of my HTML files, causing a lot of clutter.

For most images the src is set correctly, however images linked in the head like the OpenGraph image get completely replaced by the resulting script.

I'm not sure if this is related to #29, but it seems possible to me.

Examples of the output:

Adding plugin causes glob import to break

Using a glob import for my png files ala, import PICS from './*.png'; works fine without the plugin.

However, adding the plugin causes dev mode to display the following issue

This is not working for me. Get some write EPIPE error.

package.json file

.
.
.
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
.
.
.

When I run npm run build, I get the following error, searched a lot but unable to solve.

> parcel build index.html

🚨  /home/amankapoor/abc/xyz/urt/assets/FamilyImages/mountain.jpg: Error in file: /home/amankapoor/abc/xyz/urt/assets/FamilyImages/mountain.jpg

write EPIPE

write EPIPE
    at WriteWrap.afterWrite [as oncomplete] (net.js:836:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `parcel build index.html`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/amankapoor/.npm/_logs/2018-08-01T15_00_54_093Z-debug.log

That log file looks like this:

0 info it worked if it ends with ok
1 verbose cli [ '/home/amankapoor/.nvm/versions/node/v10.7.0/bin/node',
1 verbose cli   '/home/amankapoor/.nvm/versions/node/v10.7.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: /home/amankapoor/.nvm/versions/node/v10.7.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/amankapoor/abc/xyz/urt/node_modules/.bin:/home/amankapoor/.nvm/versions/node/v10.7.0/bin:/home/amankapoor/bin:/home/amankapoor/.local/bin:~/flutter/bin:/home/amankapoor/go/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/usr/local/go/bin:/snap/bin:/usr/local/go/bin:/bin:~/flutter/bin:/home/amankapoor/go/src:/home/amankapoor/go/bin:/home/amankapoor/Android/Sdk/tools:/home/amankapoor/Android/Sdk/platform-tools
9 verbose lifecycle [email protected]~build: CWD: /home/amankapoor/abc/xyz/urt
10 silly lifecycle [email protected]~build: Args: [ '-c', 'parcel build index.html' ]
11 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `parcel build index.html`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/home/amankapoor/.nvm/versions/node/v10.7.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:304:16)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.<anonymous> (/home/amankapoor/.nvm/versions/node/v10.7.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:961:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/amankapoor/abc/xyz/urt
16 verbose Linux 4.15.0-29-generic
17 verbose argv "/home/amankapoor/.nvm/versions/node/v10.7.0/bin/node" "/home/amankapoor/.nvm/versions/node/v10.7.0/bin/npm" "run" "build"
18 verbose node v10.7.0
19 verbose npm  v6.1.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: `parcel build index.html`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

There are many images and on every run on npm run build, the image in the error changes.

Getting build error after installing

⚠️  Unexpected identifier  async addAsset(asset) {
        ^^^^^^^^
SyntaxError: Unexpected identifier
    at NativeCompileCache._moduleCompile (/GIT-work/The-Student-Rooms/enlitened-client-app/node_modules/v8-compile-cache/v8-compi
le-cache.js:226:18)    at Module._compile (/GIT-work/The-Student-Rooms/enlitened-client-app/node_modules/v8-compile-cache/v8-compile-cache.js:172:36
)    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
🚨  /GIT-work/The-Student-Rooms/enlitened-client-app/src/components/PageHeader/PageHeader.css:undefined:undefined: Unexpected iden
tifier
  async packageImage(options, location) {
        ^^^^^^^^^^^^
SyntaxError: Unexpected identifier
    at NativeCompileCache._moduleCompile (/GIT-work/The-Student-Rooms/enlitened-client-app/node_modules/v8-compile-cache/v8-compi
le-cache.js:226:18)
    at Module._compile (/GIT-work/The-Student-Rooms/enlitened-client-app/node_modules/v8-compile-cache/v8-compile-cache.js:172:36
)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)    at require (/GIT-work/The-Student-Rooms/enlitened-client-app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Parser.findParser (/GIT-work/The-Student-Rooms/enlitened-client-app/node_modules/parcel-bundler/lib/Parser.js:77:45)
    at Parser.getAsset (/GIT-work/The-Student-Rooms/enlitened-client-app/node_modules/parcel-bundler/lib/Parser.js:84:22)

I had to remove the plugin for the time being as it was preventing normal builds.

cheers

Can you join convert image to base64

Such as the title。

Image buffer is undefined

After installing the dev dependency, and trying to build for production, I get this error:

Plugin causes Error on production build: "Cannot find module 'ihem'"

Hello, I tried using this plugin, but when i pushed to production, and navigated off the main page (eg. to /pages), and refreshed the page, I got this error.

Uncaught (in promise) Error: Cannot find module 'ihem'

I have absolutely NO idea how to fix it since it doesn't show where the error stems from.

JPG images are being saved as [object Object]

This happens for the released 1.0.1 version

option: skip-if-larger

Hi, if it possible add option skip-if-larger to imagemin.config.js??
Sometimes after optimisation images are bigger then were before :(