├── .github ├── dependabot.yml └── workflows │ ├── codeql-analysis.yml │ └── testing.yml ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── index.js ├── package-lock.json ├── package.json ├── schema.json └── test ├── app.js ├── test.bmp ├── test.gif ├── test.jpg ├── test.png ├── test.svg └── webpack4.config.js /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: daily 7 | time: "04:00" 8 | open-pull-requests-limit: 10 9 | ignore: 10 | - dependency-name: webpack 11 | versions: 12 | - 5.18.0 13 | - 5.19.0 14 | - 5.20.0 15 | - 5.20.1 16 | - 5.20.2 17 | - 5.21.2 18 | - 5.22.0 19 | - 5.23.0 20 | - 5.24.0 21 | - 5.24.1 22 | - 5.24.2 23 | - 5.24.3 24 | - 5.24.4 25 | - 5.25.1 26 | - 5.26.0 27 | - 5.26.2 28 | - 5.26.3 29 | - 5.27.1 30 | - 5.27.2 31 | - 5.28.0 32 | - 5.30.0 33 | - 5.31.0 34 | - 5.31.2 35 | - 5.32.0 36 | - 5.33.2 37 | - 5.34.0 38 | - 5.35.0 39 | - 5.35.1 40 | - 5.36.0 41 | - dependency-name: y18n 42 | versions: 43 | - 4.0.1 44 | - 4.0.2 45 | - dependency-name: webpack-cli 46 | versions: 47 | - 4.4.0 48 | - 4.5.0 49 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | name: "CodeQL" 7 | 8 | on: 9 | push: 10 | branches: [master] 11 | pull_request: 12 | # The branches below must be a subset of the branches above 13 | branches: [master] 14 | schedule: 15 | - cron: '0 16 * * 6' 16 | 17 | jobs: 18 | analyze: 19 | name: Analyze 20 | runs-on: ubuntu-latest 21 | 22 | strategy: 23 | fail-fast: false 24 | matrix: 25 | # Override automatic language detection by changing the below list 26 | # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python'] 27 | language: ['javascript'] 28 | # Learn more... 29 | # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection 30 | 31 | steps: 32 | - name: Checkout repository 33 | uses: actions/checkout@v2 34 | with: 35 | # We must fetch at least the immediate parents so that if this is 36 | # a pull request then we can checkout the head. 37 | fetch-depth: 2 38 | 39 | # If this run was triggered by a pull request event, then checkout 40 | # the head of the pull request instead of the merge commit. 41 | - run: git checkout HEAD^2 42 | if: ${{ github.event_name == 'pull_request' }} 43 | 44 | # Initializes the CodeQL tools for scanning. 45 | - name: Initialize CodeQL 46 | uses: github/codeql-action/init@v1 47 | with: 48 | languages: ${{ matrix.language }} 49 | # If you wish to specify custom queries, you can do so here or in a config file. 50 | # By default, queries listed here will override any specified in a config file. 51 | # Prefix the list here with "+" to use these queries and those in the config file. 52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v1 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 https://git.io/JvXDl 61 | 62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 63 | # and modify them (or add more) to build your code if your project 64 | # uses a compiled language 65 | 66 | #- run: | 67 | # make bootstrap 68 | # make release 69 | 70 | - name: Perform CodeQL Analysis 71 | uses: github/codeql-action/analyze@v1 72 | -------------------------------------------------------------------------------- /.github/workflows/testing.yml: -------------------------------------------------------------------------------- 1 | name: Testing 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | pull_request: 7 | branches: [master] 8 | 9 | jobs: 10 | 11 | build: 12 | runs-on: ubuntu-latest 13 | 14 | strategy: 15 | matrix: 16 | node-version: [12.x, 13.x, 14.x, 15.x, 16.x] 17 | steps: 18 | - uses: actions/checkout@v2 19 | 20 | - name: Use Node ${{matrix.node-version}} 21 | uses: actions/setup-node@v1 22 | with: 23 | node-version: ${{matrix.node-version}} 24 | - run: npm ci 25 | - run: npm run test 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | npm-debug.log 4 | test/public 5 | *.sublime-project 6 | *.sublime-workspace -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | All notable changes to this project will be documented in this file. 3 | 4 | ## [8.0.0] 5 | 6 | * update imagemin-svgo to 9.0.0 7 | * require node 12 8 | * remove support for webpack 1, 2, 3 9 | * bump packages for security fixes 10 | 11 | ## [7.0.0] 12 | 13 | * require node 10 14 | * upgrade imagemin-pngquant to 9.0.1 15 | * upgrade imagemin-webp to 6.0.0 16 | * upgrade imagemin-mozjpeg to 9.0.0 17 | * bump some packages for security fixes 18 | 19 | 20 | ## [6.0.0] 21 | 22 | * upgrade imagemin-pngquant to 8.0.0 (version bump because of the api change => quality now is an array). For more info see: https://github.com/imagemin/imagemin-pngquant#quality 23 | 24 | ## [5.1.0] 25 | 26 | * upgrade outdated packages (except imagemin-pngquant because this one has an api change) 27 | 28 | ## [5.0.0] 29 | 30 | * upgrade outdated packages 31 | * move the image compressors to optionalDependencies. 32 | 33 | ## [4.2.0] 34 | 35 | * Update svgo to 6.0.0 #145 36 | 37 | ## [4.1.0] 38 | 39 | * Delay imports #140 40 | 41 | ## [4.0.0] 42 | 43 | Updated mozjpeg to v7.0.0 44 | 45 | ## [3.6.0] 46 | 47 | Reverted mozjpeg to v6.0.0, same as v3.4.0 48 | 49 | ## [3.5.0] deprecated! 50 | 51 | Updated mozjepg to v7.0.0, but this was a major change and thus reverted it. 52 | 53 | ## [3.0.0] - 2016-10-16 54 | ### Changed 55 | - Changed jpeg compression algorithm from jpegtran to mozjpeg [PR#38](https://github.com/tcoopman/image-webpack-loader/pull/38). 56 | See [imagemin-mozjpeg](https://github.com/imagemin/imagemin-mozjpeg) for configuration options. 57 | - Updated minor versions of dependencies: `loader-utils`, `imagemin-gifsicle`, `imagemin-optipng`, `imagemin-svgo`, `webpack` 58 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Thomas Coopman 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Dependencies status](https://david-dm.org/tcoopman/image-webpack-loader/status.svg) 2 | ![devDependencies status](https://david-dm.org/tcoopman/image-webpack-loader/dev-status.svg) 3 | ![Build status](https://github.com/tcoopman/image-webpack-loader/workflows/Testing/badge.svg) 4 | 5 | # DEPRECATED 6 | 7 | please use: https://github.com/webpack-contrib/image-minimizer-webpack-plugin/ 8 | 9 | # image-webpack-loader 10 | 11 | Image loader module for webpack 12 | 13 | > Minify PNG, JPEG, GIF, SVG and WEBP images with [imagemin](https://github.com/kevva/imagemin) 14 | 15 | *Issues with the output should be reported on the imagemin [issue tracker](https://github.com/kevva/imagemin/issues).* 16 | 17 | ## Install 18 | 19 | ```sh 20 | $ npm install image-webpack-loader --save-dev 21 | ``` 22 | 23 | ### Install in container 24 | 25 | #### `node:12-buster` 26 | 27 | No additional preparations required. 28 | All dependencies will be compiled automatically. 29 | **Not** recommended because of large image size (~1 GB). 30 | 31 | #### `node:12-buster-slim` 32 | 33 | Prepare script: 34 | 35 | ```shell script 36 | apt-get update 37 | apt-get install -y --no-install-recommends autoconf automake g++ libpng-dev make 38 | ``` 39 | 40 | **Recommended** container image. 41 | 42 | #### `node:12-alpine` 43 | 44 | Prepare script: 45 | 46 | ```shell script 47 | apk add --no-cache autoconf automake file g++ libtool make nasm libpng-dev 48 | ``` 49 | 50 | **Not** recommended because of long build time. 51 | 52 | #### Benchmark 53 | 54 | | Container distro | Pull time | Build time | Total time | 55 | | --------------------- | ---------- | ----------- | ----------- | 56 | | `node:12-buster` | 42 seconds | 77 seconds | 119 seconds | 57 | | `node:12-buster-slim` | 11 seconds | 103 seconds | 114 seconds | 58 | | `node:12-alpine` | 8 seconds | 122 seconds | 130 seconds | 59 | 60 | ### libpng issues 61 | 62 | Installing on some versions of OSX may raise errors with a [missing libpng dependency](https://github.com/tcoopman/image-webpack-loader/issues/51#issuecomment-273597313): 63 | ``` 64 | Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib 65 | ``` 66 | This can be remedied by installing the newest version of libpng with [homebrew](http://brew.sh/): 67 | 68 | ```sh 69 | brew install libpng 70 | ``` 71 | 72 | ## Usage 73 | 74 | [Documentation: Using loaders](https://webpack.js.org/concepts/loaders/) 75 | 76 | In your `webpack.config.js`, add the image-loader, chained after the [file-loader](https://github.com/webpack/file-loader): 77 | 78 | ```js 79 | rules: [{ 80 | test: /\.(gif|png|jpe?g|svg)$/i, 81 | use: [ 82 | 'file-loader', 83 | { 84 | loader: 'image-webpack-loader', 85 | options: { 86 | bypassOnDebug: true, // webpack@1.x 87 | disable: true, // webpack@2.x and newer 88 | }, 89 | }, 90 | ], 91 | }] 92 | ``` 93 | 94 | For each optimizer you wish to configure, specify the corresponding key in options: 95 | 96 | ```js 97 | rules: [{ 98 | test: /\.(gif|png|jpe?g|svg)$/i, 99 | use: [ 100 | 'file-loader', 101 | { 102 | loader: 'image-webpack-loader', 103 | options: { 104 | mozjpeg: { 105 | progressive: true, 106 | }, 107 | // optipng.enabled: false will disable optipng 108 | optipng: { 109 | enabled: false, 110 | }, 111 | pngquant: { 112 | quality: [0.65, 0.90], 113 | speed: 4 114 | }, 115 | gifsicle: { 116 | interlaced: false, 117 | }, 118 | // the webp option will enable WEBP 119 | webp: { 120 | quality: 75 121 | } 122 | } 123 | }, 124 | ], 125 | }] 126 | ``` 127 | 128 | Comes bundled with the following optimizers, which are automatically enabled by default: 129 | 130 | - [mozjpeg](https://github.com/imagemin/imagemin-mozjpeg) — *Compress JPEG images* 131 | - [optipng](https://github.com/kevva/imagemin-optipng) — *Compress PNG images* 132 | - [pngquant](https://github.com/imagemin/imagemin-pngquant) — *Compress PNG images* 133 | - [svgo](https://github.com/kevva/imagemin-svgo) — *Compress SVG images* 134 | - [gifsicle](https://github.com/kevva/imagemin-gifsicle) — *Compress GIF images* 135 | 136 | And optional optimizers: 137 | 138 | - [webp](https://github.com/imagemin/imagemin-webp) — *Compress JPG & PNG images into WEBP* 139 | 140 | _Each optimizers can be disabled by specifying `optimizer.enabled: false`, and optional ones can be enabled by simply putting them in the options_ 141 | 142 | If you are using Webpack 1, take a look at the [old docs](http://webpack.github.io/docs/using-loaders.html) (or consider upgrading). 143 | 144 | ## Options 145 | 146 | Loader options: 147 | 148 | #### bypassOnDebug *(all)* 149 | 150 | Type: `boolean` 151 | Default: `false` 152 | 153 | 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. 154 | 155 | #### disable 156 | 157 | Type: `boolean` 158 | Default `false` 159 | 160 | 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. 161 | 162 | For optimizer options, an up-to-date and exhaustive list is available on each optimizer repository: 163 | 164 | - [mozjpeg](https://github.com/imagemin/imagemin-mozjpeg#options) 165 | - [optipng](https://github.com/kevva/imagemin-optipng#options) 166 | - [pngquant](https://github.com/imagemin/imagemin-pngquant#options) 167 | - [svgo](https://github.com/imagemin/imagemin-svgo#options) 168 | - [gifsicle](https://github.com/imagemin/imagemin-gifsicle#options) 169 | - [webp](https://github.com/imagemin/imagemin-webp#options) 170 | 171 | ## Inspiration 172 | 173 | * [gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin) 174 | * [file-loader](https://github.com/webpack/file-loader) 175 | * [imagemin-pngquant](https://github.com/imagemin/imagemin-pngquant) 176 | 177 | ## License 178 | 179 | MIT (http://www.opensource.org/licenses/mit-license.php) 180 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var imagemin = require('imagemin'); 2 | var loaderUtils = require('loader-utils'); 3 | var assign = require('object-assign'); 4 | var schemaValidation = require('schema-utils') 5 | 6 | var loaderSchema = require('./schema.json') 7 | /** 8 | * Basically the getLoaderConfig() function from loader-utils v0.2. 9 | */ 10 | function getLegacyLoaderConfig(loaderContext, defaultConfigKey) { 11 | var options = loaderUtils.getOptions(loaderContext); 12 | var configKey = options ? options.config : defaultConfigKey; 13 | if (configKey) { 14 | return assign({}, options, loaderContext.options[configKey]); 15 | } 16 | return options; 17 | } 18 | 19 | module.exports = function(content) { 20 | this.cacheable && this.cacheable(); 21 | 22 | var config = this.version === 2 ? 23 | loaderUtils.getOptions(this) 24 | : getLegacyLoaderConfig(this, "imageWebpackLoader"); 25 | 26 | if (config === null) { 27 | // handle the cases in which loaderUtils.getOptions() returns null 28 | // see https://github.com/webpack/loader-utils#getoptions 29 | config = {} 30 | } 31 | 32 | var options = { 33 | bypassOnDebug: config.bypassOnDebug || false, 34 | disable: config.disable || false, 35 | // default optimizers 36 | gifsicle: config.gifsicle || {}, 37 | mozjpeg: config.mozjpeg || {}, 38 | pngquant: config.pngquant || {}, 39 | optipng: config.optipng || {}, 40 | svgo: config.svgo || {}, 41 | // optional optimizers 42 | webp: config.webp || { enabled: false } 43 | }; 44 | // Remove in interlaced, progressive and optimizationLevel checks in new major version 45 | if (config.hasOwnProperty('interlaced')) { 46 | options.gifsicle.interlaced = config.interlaced; 47 | this.emitWarning("DEPRECATED. Configure gifsicle's interlaced option in its own options. (gifsicle.interlaced)"); 48 | } 49 | if (config.hasOwnProperty('progressive')) { 50 | options.mozjpeg.progressive = config.progressive; 51 | this.emitWarning("DEPRECATED. Configure mozjpeg's progressive option in its own options. (mozjpeg.progressive)"); 52 | } 53 | if (config.hasOwnProperty('optimizationLevel')) { 54 | options.optipng.optimizationLevel = config.optimizationLevel; 55 | this.emitWarning("DEPRECATED. Configure optipng's optimizationLevel option in its own options. (optipng.optimizationLevel)"); 56 | } 57 | 58 | schemaValidation(loaderSchema, options, { 59 | name: 'imageWebpackLoader' 60 | }); 61 | 62 | var callback = this.async(), 63 | called = false; 64 | 65 | if ((this.debug === true && options.bypassOnDebug === true) || options.disable === true) { 66 | // Bypass processing while on watch mode 67 | return callback(null, content); 68 | } else { 69 | var plugins = []; 70 | // default optimizers 71 | if(options.gifsicle.enabled !== false) 72 | plugins.push(require('imagemin-gifsicle')(options.gifsicle)); 73 | if(options.mozjpeg.enabled !== false) 74 | plugins.push(require('imagemin-mozjpeg')(options.mozjpeg)); 75 | if(options.svgo.enabled !== false) 76 | plugins.push(require('imagemin-svgo')(options.svgo)); 77 | if(options.pngquant.enabled !== false) 78 | plugins.push(require('imagemin-pngquant')(options.pngquant)); 79 | if(options.optipng.enabled !== false) 80 | plugins.push(require('imagemin-optipng')(options.optipng)); 81 | // optional optimizers 82 | if(options.webp.enabled !== false) { 83 | async function loadWebp() { 84 | await import('imagemin-webp').then(({ default: imageminWebp }) => { 85 | plugins.push(imageminWebp(options.webp)); 86 | }); 87 | } 88 | loadWebp() 89 | } 90 | 91 | imagemin 92 | .buffer(content, { 93 | plugins 94 | }) 95 | .then(data => { 96 | callback(null, data); 97 | }) 98 | .catch(err => { 99 | callback(err); 100 | }); 101 | } 102 | }; 103 | 104 | module.exports.raw = true; 105 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "image-webpack-loader", 3 | "version": "8.1.0", 4 | "description": "Image loader module for webpack", 5 | "author": "Thomas Coopman @tcoopman", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "git@github.com:tcoopman/image-webpack-loader.git" 10 | }, 11 | "scripts": { 12 | "test:webpack4": "npm install -q webpack@4.x webpack-cli && npm run test:clean && webpack --config test/webpack4.config.js", 13 | "test:clean": "rimraf test/public/assets", 14 | "test": "npm run test:webpack4" 15 | }, 16 | "dependencies": { 17 | "imagemin": "^7.0.1", 18 | "loader-utils": "^2.0.0", 19 | "object-assign": "^4.1.1", 20 | "schema-utils": "^2.7.1" 21 | }, 22 | "optionalDependencies": { 23 | "imagemin-gifsicle": "^7.0.0", 24 | "imagemin-mozjpeg": "^9.0.0", 25 | "imagemin-optipng": "^8.0.0", 26 | "imagemin-pngquant": "^9.0.2", 27 | "imagemin-svgo": "^9.0.0", 28 | "imagemin-webp": "^7.0.0" 29 | }, 30 | "devDependencies": { 31 | "file-loader": "^6.2.0", 32 | "rimraf": "^3.0.2", 33 | "webpack": "^4.46.0", 34 | "webpack-cli": "^4.9.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "additionalProperties": false, 3 | "properties": { 4 | "mozjpeg": { 5 | "additionalProperties": true, 6 | "type": "object" 7 | }, 8 | "optipng": { 9 | "additionalProperties": true, 10 | "type": "object" 11 | }, 12 | "pngquant": { 13 | "additionalProperties": true, 14 | "type": "object" 15 | }, 16 | "gifsicle": { 17 | "additionalProperties": true, 18 | "type": "object" 19 | }, 20 | "webp": { 21 | "additionalProperties": true, 22 | "type": "object" 23 | }, 24 | "svgo": { 25 | "additionalProperties": true, 26 | "type": "object" 27 | }, 28 | "bypassOnDebug": { 29 | "type": "boolean" 30 | }, 31 | "disable": { 32 | "type": "boolean" 33 | } 34 | }, 35 | "type": "object" 36 | } 37 | -------------------------------------------------------------------------------- /test/app.js: -------------------------------------------------------------------------------- 1 | require('./test.gif'); 2 | require('./test.jpg'); 3 | require('./test.png'); 4 | require('./test.svg'); 5 | require('./test.bmp'); 6 | -------------------------------------------------------------------------------- /test/test.bmp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tcoopman/image-webpack-loader/75879a7c7b99fb853f5f8ea542560bd7e062a1f6/test/test.bmp -------------------------------------------------------------------------------- /test/test.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tcoopman/image-webpack-loader/75879a7c7b99fb853f5f8ea542560bd7e062a1f6/test/test.gif -------------------------------------------------------------------------------- /test/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tcoopman/image-webpack-loader/75879a7c7b99fb853f5f8ea542560bd7e062a1f6/test/test.jpg -------------------------------------------------------------------------------- /test/test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tcoopman/image-webpack-loader/75879a7c7b99fb853f5f8ea542560bd7e062a1f6/test/test.png -------------------------------------------------------------------------------- /test/test.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | digital-camera 9 | 10 | 11 | 12 | digital 13 | 14 | 11 15 | hardware 16 | photo 17 | digicam 18 | computer 19 | camera 20 | 21 | 22 | 23 | 24 | AJ Ashton 25 | 26 | 27 | 28 | 29 | AJ Ashton 30 | 31 | 32 | 33 | 34 | AJ Ashton 35 | 36 | 37 | 38 | image/svg+xml 39 | 40 | 41 | en 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | -------------------------------------------------------------------------------- /test/webpack4.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var path = require("path"); 3 | var webpack = require("webpack"); 4 | 5 | var assetsPath = path.join(__dirname, "public/assets"); 6 | 7 | var loaderOptions = { 8 | mozjpeg: { 9 | quality: 65 10 | }, 11 | pngquant: { 12 | quality: [0.65, 0.9], 13 | speed: 4 14 | }, 15 | svgo: { 16 | plugins: [ 17 | { 18 | name: 'removeViewBox', 19 | active: false 20 | }, 21 | { 22 | name: 'removeEmptyAttrs', 23 | active: false 24 | } 25 | ] 26 | }, 27 | gifsicle: { 28 | optimizationLevel: 7, 29 | interlaced: false 30 | }, 31 | optipng: { 32 | optimizationLevel: 7, 33 | interlaced: false 34 | }, 35 | webp: { 36 | quality: 75 37 | } 38 | }; 39 | 40 | var fileLoaderOptions = { 41 | hash: "sha512", 42 | digest: "hex", 43 | name: "[hash].[ext]" 44 | }; 45 | 46 | module.exports = [ 47 | { 48 | mode: "production", 49 | entry: "./test/app.js", 50 | output: { 51 | path: assetsPath, 52 | filename: "app.[hash].js" 53 | }, 54 | module: { 55 | rules: [ 56 | { 57 | test: /.*\.(gif|png|jpe?g|svg|webp)$/i, 58 | use: [ 59 | { 60 | loader: "file-loader", 61 | options: fileLoaderOptions 62 | }, 63 | { 64 | loader: require.resolve("../"), 65 | options: loaderOptions 66 | } 67 | ] 68 | }, 69 | { 70 | test: /\.bmp$/i, 71 | use: [ 72 | { 73 | loader: "file-loader", 74 | options: fileLoaderOptions 75 | }, 76 | require.resolve("../") // loaderUtils.getOptions() returns null for this one 77 | ] 78 | } 79 | ] 80 | } 81 | } 82 | ]; 83 | --------------------------------------------------------------------------------