image-webp-loader - npm Package Compare versions

Comparing version 0.0.2 to 1.0.0

index.js

@@ -14,16 +14,37 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = function (content) {
+  const self = this
   const options = loaderUtils.getOptions(this) || {}
-  const hasHash = /\[hash.*?\]/.test(options.name) ? 1 : 0
+  options.name = options.name ? options.name : '[name].[hash].[ext]'
+  options.publicPath = options.publicPath ? options.publicPath : '/'
+  options.outputPath = options.outputPath ? options.outputPath : resolve(__dirname, '../../dist')
+  options.quality = options.quality ? options.quality : 100
+  options.requestType = options.requestType ? options.requestType : false
   const url = _loaderUtils.default.interpolateName(this, options.name, {content, regExp: options.regExp})
+  const fileName = this.resourcePath.replace(/.*[/\\]/, '')
   this.emitFile(url, content)
-  this.targetFilePath = url
-  const webpPath = options.name ? /[\//]/.test(options.name) ? url.match(/.*[\//]/)[0] : './' : './'
+  const matchSubQuality = () => {
+    let back = false
+    if (typeof options.subQuality === 'object') {
+      if (options.subQuality[fileName]) {
+        back = options.subQuality[fileName]
+      }
+    }
+    return back
+  }
+  const webpPath = options.name ? /\//.test(options.name) ? url.match(/.*\//)[0] : './' : './'
   imagemin([this.resourcePath], resolve(options.outputPath, webpPath), {
-    use: [imageminWebp({quality: 90})]
+    use: [imageminWebp({
+      quality: matchSubQuality() ? matchSubQuality() : options.quality,
+      method: 6
+    })]
   }).then(back => {
-    if (hasHash) {
-      let webpPath = back[0].path
-      const hash = url.match(/\.[^.]+(?=\.(png|jpe?g))/i)[0].substr(1)
-      let newPath = webpPath.replace(/\.webp$/g, "." + hash) + '.webp'
+    let webpPath = back[0].path
+    // Check whether the conversion is successful
+    if (/\.webp$/.test(webpPath)) {
+      const newPath = resolve(options.outputPath, url.replace(/\.(png|jpe?g)$/i, '.webp'))
       fs.rename(webpPath, newPath, error => error && console.log(error))
+    } else {
+      fs.unlink(webpPath, error => error && console.log(error))
+      console.log('\n')
+      console.log('\x1B[46m%s\x1b[49m', fileName + " to webp fail,try to adjust the quality attribute or add subQuality attribute")
     }
@@ -40,5 +61,5 @@ })
   if (options.requestType) {
-    publicPath = publicPath.replace(/\.(webp|png|jpe?g)/, '.' + options.requestType)
+    publicPath = publicPath.replace(/\.(webp|png|jpe?g)/i, '.' + options.requestType)
   }
   return `module.exports = __webpack_public_path__ + ${JSON.stringify(publicPath)};`
 }

package.json

 {
   "name": "image-webp-loader",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "With webpack-loader to convert ordinary picture format to webp pictures, you can produce original pictures and webp pictures together and keep the same hash",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -0,5 +1,125 @@
+[![npm][npm]][npm-url]
+
 # image-webp-laoder
 
-Your can with webpack-loader to convert ordinary picture format to webp pictures, you can produce original pictures and webp pictures together and keep the same hash
+Your can with webpack-loader to convert ordinary picture format to webp pictures, you can produce **original pictures and webp pictures** together and keep the **same hash**
 
-**In development, we will improve and put it into use as soon as possible**
+## Install
+
+```sh
+npm install image-webp-laoder --save-dev
+```
+
+## Usage
+
+Here is the example of using `image-webp-laoder`, after packaging will produce the original picture and webp picture to the specified path:
+
+```javascript
+rules: [
+  {
+    test: /\.(png|jpe?g)$/i,
+    use: [
+      {
+        loader: resolve(__dirname, '../'),
+        options: {
+          publicPath: '/',
+          outputPath: resolve(__dirname, './dist'),
+          name: 'images/[name].[hash].[ext]'
+        }
+      }
+    ]
+  }
+]
+```
+
+If you want to control the size of the webp image, you can add the `quality` attribute, set quality factor between 0 and 100 ( `Default: 100` )
+
+```javascript
+rules: [
+  {
+    test: /\.(png|jpe?g)$/i,
+    use: [
+      {
+        loader: resolve(__dirname, '../'),
+        options: {
+          publicPath: '/',
+          outputPath: resolve(__dirname, './dist'),
+          name: 'images/[name].[hash].[ext]',
+          quality: 85
+        }
+      }
+    ]
+  }
+]
+```
+**Tip:** For some original images that have been optimized by compression, `image-webp-loader` will **fail to convert**. We will give details on the console. At this time, you can reduce the `quality` attributes or add `subQuality` attributes to set separate quality for these files.
+
+```javascript
+rules: [
+  {
+    test: /\.(png|jpe?g)$/i,
+    use: [
+      {
+        loader: resolve(__dirname, '../'),
+        options: {
+          publicPath: '/',
+          outputPath: resolve(__dirname, './dist'),
+          name: 'images/[name].[hash].[ext]',
+          quality: 100,
+          subQuality: {
+            '1.jpg': 80,
+            '2.jpg': 70
+          }
+        }
+      }
+    ]
+  }
+]
+```
+This will cause `1.jpg` and `2.jpg` to use `80` and `70` quality to produce webp pictures, thus solving the case of failed packaging but at the same time it also brings about some blurring
+
+## Compatible
+
+In actual development, webp needs to be compatible. In the case of browser support, the webp format is used. Since the decision logic cannot be embedded in `webpack`, we rely on the server to determine whether webp is supported. The `requestType` is defined in `image-webp-laoder`. The attribute, requestType attribute, can change the picture request suffix and conditionally respond to requests for special suffixes. For example:
+
+```javascript
+rules: [
+  {
+    test: /\.(png|jpe?g)$/i,
+    use: [
+      {
+        loader: resolve(__dirname, '../'),
+        options: {
+          publicPath: '/',
+          outputPath: resolve(__dirname, './dist'),
+          name: 'images/[name].[hash].[ext]',
+          requestType: 'image'
+        }
+      }
+    ]
+  }
+]
+```
+If we generate `1.jpg` and `1.webp` files by default the browser will request the picture via `1.jpg`, if we change the requestType attribute to `'image'` then the request becomes `1.image` if not considered compatible You can set the `requestType: 'webp'`, then all picture requests become webp requests.
+
+<h2 align="center">Options</h2>
+
+|Name|Type|Default|Description|
+|:--:|:--:|:-----:|:----------|
+|**`name`**|`String`|`[name].[hash].[ext]`|Configure a custom filename template for your file|
+|**`publicPath`**|`String`|`'/'`|Configure a custom `public` path for your file|
+|**`outputPath`**|`String`|`resolve(__dirname, '../../dist')`|Configure a custom `output` path for your file (`distPath`)|
+|**`quality`**|`Int`|`100`|Set webp picture compression quality, (`0~100`)|
+|**`subQuality`**|`JSON-Object`|`{}`|Set the compression quality of special pictures|
+|**`requestType`**|`String`|`false`|Set picture request suffix|
+
+## Inspiration
+
+`image-webp-laoder` is heavily inspired by [webp-loader](https://www.npmjs.com/package/webp-loader).
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
+
+[npm]: https://img.shields.io/npm/v/image-webp-loader.svg
+[npm-url]: https://npmjs.com/package/file-loader

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92618

increased by537.51%

Lines of code

94

increased by141.03%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

125

increased by2400%

Worsened metrics

Number of package files

7

decreased by-22.22%

No dependency changes