url-loader - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

CHANGELOG.md

@@ -5,2 +5,11 @@ # Changelog
 
+## [4.1.0](https://github.com/webpack-contrib/url-loader/compare/v4.0.0...v4.1.0) (2020-04-08)
+
+
+### Features
+
+* the `mimetype` option can be `Boolean`
+* added the `encoding` option
+* added the `generator` option 
+
 ## [4.0.0](https://github.com/webpack-contrib/url-loader/compare/v3.0.0...v4.0.0) (2020-03-17)
@@ -7,0 +16,0 @@

dist/index.js

@@ -39,3 +39,52 @@ "use strict";
 
-function loader(src) {
+function getMimetype(mimetype, resourcePath) {
+  if (typeof mimetype === 'boolean') {
+    if (mimetype) {
+      const resolvedMimeType = _mimeTypes.default.contentType(_path.default.extname(resourcePath));
+
+      if (!resolvedMimeType) {
+        return '';
+      }
+
+      return resolvedMimeType.replace(/;\s+charset/i, ';charset');
+    }
+
+    return '';
+  }
+
+  if (typeof mimetype === 'string') {
+    return mimetype;
+  }
+
+  const resolvedMimeType = _mimeTypes.default.contentType(_path.default.extname(resourcePath));
+
+  if (!resolvedMimeType) {
+    return '';
+  }
+
+  return resolvedMimeType.replace(/;\s+charset/i, ';charset');
+}
+
+function getEncoding(encoding) {
+  if (typeof encoding === 'boolean') {
+    return encoding ? 'base64' : '';
+  }
+
+  if (typeof encoding === 'string') {
+    return encoding;
+  }
+
+  return 'base64';
+}
+
+function getEncodedData(generator, mimetype, encoding, content, resourcePath) {
+  if (generator) {
+    return generator(content, mimetype, encoding, resourcePath);
+  }
+
+  return `data:${mimetype}${encoding ? `;${encoding}` : ''},${content.toString( // eslint-disable-next-line no-undefined
+  encoding || undefined)}`;
+}
+
+function loader(content) {
   // Loader Options
@@ -48,14 +97,17 @@ const options = (0, _loaderUtils.getOptions)(this) || {};
 
-  if (shouldTransform(options.limit, src.length)) {
-    const file = this.resourcePath;
+  if (shouldTransform(options.limit, content.length)) {
+    const {
+      resourcePath
+    } = this;
+    const mimetype = getMimetype(options.mimetype, resourcePath);
+    const encoding = getEncoding(options.encoding);
 
-    const mimetype = options.mimetype || _mimeTypes.default.contentType(_path.default.extname(file));
-
-    if (typeof src === 'string') {
+    if (typeof content === 'string') {
       // eslint-disable-next-line no-param-reassign
-      src = Buffer.from(src);
+      content = Buffer.from(content);
     }
 
+    const encodedData = getEncodedData(options.generator, mimetype, encoding, content, resourcePath);
     const esModule = typeof options.esModule !== 'undefined' ? options.esModule : true;
-    return `${esModule ? 'export default' : 'module.exports ='} ${JSON.stringify(`data:${mimetype || ''};base64,${src.toString('base64')}`)}`;
+    return `${esModule ? 'export default' : 'module.exports ='} ${JSON.stringify(encodedData)}`;
   } // Normalize the fallback.
@@ -77,3 +129,3 @@
   });
-  return fallback.call(fallbackLoaderContext, src);
+  return fallback.call(fallbackLoaderContext, content);
 } // Loader Mode
@@ -80,0 +132,0 @@

dist/options.json

@@ -8,6 +8,37 @@ {
     },
+    "encoding": {
+      "description": "Specify the encoding which the file will be in-lined with.",
+      "oneOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "enum": [
+            "utf8",
+            "utf16le",
+            "latin1",
+            "base64",
+            "hex",
+            "ascii",
+            "binary",
+            "ucs2"
+          ]
+        }
+      ]
+    },
     "mimetype": {
       "description": "The MIME type for the file to be transformed (https://github.com/webpack-contrib/url-loader#mimetype).",
-      "type": "string"
+      "oneOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "string"
+        }
+      ]
     },
+    "generator": {
+      "description": "Adding custom implementation for encoding files.",
+      "instanceof": "Function"
+    },
     "fallback": {
@@ -14,0 +45,0 @@ "description": "An alternative loader to use when a target file's size exceeds the limit set in the limit option (https://github.com/webpack-contrib/url-loader#fallback).",

package.json

 {
   "name": "url-loader",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "A loader for webpack which transforms files into base64 URIs",
@@ -56,4 +56,4 @@ "license": "MIT",
     "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.7",
-    "@babel/preset-env": "^7.8.7",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
     "@commitlint/cli": "^8.3.5",
@@ -63,3 +63,3 @@ "@commitlint/config-conventional": "^8.3.4",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^25.1.0",
+    "babel-jest": "^25.3.0",
     "commitlint-azure-pipelines-cli": "^1.0.3",
@@ -70,14 +70,15 @@ "cross-env": "^7.0.2",
     "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-import": "^2.20.2",
     "file-loader": "^6.0.0",
     "husky": "^4.2.3",
-    "jest": "^25.1.0",
+    "jest": "^25.3.0",
     "jest-junit": "^10.0.0",
-    "lint-staged": "^10.0.8",
+    "lint-staged": "^10.1.2",
     "memfs": "^3.1.2",
+    "mini-svg-data-uri": "^1.1.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.19.1",
+    "prettier": "^2.0.4",
     "standard-version": "^7.1.0",
-    "webpack": "^4.42.0"
+    "webpack": "^4.42.1"
   },
@@ -84,0 +85,0 @@ "keywords": [

README.md

@@ -62,10 +62,22 @@ <div align="center">
 
-### `fallback`
+|             Name              |            Type             |                            Default                            | Description                                                                         |
+| :---------------------------: | :-------------------------: | :-----------------------------------------------------------: | :---------------------------------------------------------------------------------- |
+|     **[`limit`](#limit)**     | `{Boolean\|Number\|String}` |                            `true`                             | Specifying the maximum size of a file in bytes.                                     |
+|  **[`mimetype`](#mimetype)**  |     `{Boolean\|String}`     | based from [mime-types](https://github.com/jshttp/mime-types) | Sets the MIME type for the file to be transformed.                                  |
+|  **[`encoding`](#encoding)**  |     `{Boolean\|String}`     |                           `base64`                            | Specify the encoding which the file will be inlined with.                           |
+| **[`generator`](#generator)** |        `{Function}`         |           `() => type/subtype;encoding,base64_data`           | You can create you own custom implementation for encoding data.                     |
+|  **[`fallback`](#fallback)**  |         `{String}`          |                         `file-loader`                         | Specifies an alternative loader to use when a target file's size exceeds the limit. |
+|  **[`esModule`](#esmodule)**  |         `{Boolean}`         |                            `true`                             | Use ES modules syntax.                                                              |
 
-Type: `String`
-Default: `'file-loader'`
+### `limit`
 
-Specifies an alternative loader to use when a target file's size exceeds the
-limit set in the `limit` option.
+Type: `Boolean|Number|String`
+Default: `undefined`
 
+The limit can be specified via loader options and defaults to no limit.
+
+#### `Boolean`
+
+Enable or disable transform files into base64.
+
 **webpack.config.js**
@@ -83,3 +95,3 @@
             options: {
-              fallback: require.resolve('responsive-loader'),
+              limit: false,
             },
@@ -94,6 +106,9 @@ },
 
-The fallback loader will receive the same configuration options as url-loader.
+#### `Number|String`
 
-For example, to set the quality option of a responsive-loader above use:
+A `Number` or `String` specifying the maximum size of a file in bytes.
+If the file size is **equal** or **greater** than the limit [`file-loader`](https://github.com/webpack-contrib/file-loader) will be used (by default) and all query parameters are passed to it.
 
+Using an alternative to `file-loader` is enabled via the `fallback` option.
+
 **webpack.config.js**
@@ -111,4 +126,3 @@
             options: {
-              fallback: require.resolve('responsive-loader'),
-              quality: 85,
+              limit: 8192,
             },
@@ -123,15 +137,14 @@ },
 
-### `limit`
+### `mimetype`
 
-Type: `Number|Boolean|String`
-Default: `undefined`
+Type: `Boolean|String`
+Default: based from [mime-types](https://github.com/jshttp/mime-types)
 
-The limit can be specified via loader options and defaults to no limit.
+Specify the `mimetype` which the file will be inlined with.
+If unspecified the `mimetype` value will be used from [mime-types](https://github.com/jshttp/mime-types).
 
-#### `Number|String`
+#### `Boolean`
 
-A `Number` or `String` specifying the maximum size of a file in bytes. If the file size is
-**equal** or **greater** than the limit [`file-loader`](https://github.com/webpack-contrib/file-loader)
-will be used (by default) and all query parameters are passed to it.
-Using an alternative to `file-loader` is enabled via the `fallback` option.
+The `true` value allows to generation the `mimetype` part from [mime-types](https://github.com/jshttp/mime-types).
+The `false` value removes the `mediatype` part from a Data URL (if omitted, defaults to `text/plain;charset=US-ASCII`).
 
@@ -150,3 +163,3 @@ **webpack.config.js**
             options: {
-              limit: 8192,
+              mimetype: false,
             },
@@ -161,5 +174,5 @@ },
 
-#### `Boolean`
+#### `String`
 
-Enable or disable transform files into base64.
+Sets the MIME type for the file to be transformed.
 
@@ -178,3 +191,3 @@ **webpack.config.js**
             options: {
-              limit: false,
+              mimetype: 'image/png',
             },
@@ -189,8 +202,107 @@ },
 
-### `mimetype`
+### `encoding`
 
+Type: `Boolean|String`
+Default: `base64`
+
+Specify the `encoding` which the file will be inlined with.
+If unspecified the `encoding` will be `base64`.
+
+#### `Boolean`
+
+If you don't want to use any encoding you can set `encoding` to `false` however if you set it to `true` it will use the default encoding `base64`.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              encoding: false,
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+#### `String`
+
+It supports [Node.js Buffers and Character Encodings](https://nodejs.org/api/buffer.html#buffer_buffers_and_character_encodings) which are `["utf8","utf16le","latin1","base64","hex","ascii","binary","ucs2"]`.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              encoding: 'utf8',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+### `generator`
+
+Type: `Function`
+Default: `(mimetype, encoding, content, resourcePath) => mimetype;encoding,base64_content`
+
+You can create you own custom implementation for encoding data.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(png|html)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              // The `mimetype` and `encoding` arguments will be obtained from your options
+              // The `resourcePath` argument is path to file.
+              generator: (content, mimetype, encoding, resourcePath) => {
+                if (/\.html$/i.test(resourcePath)) {
+                  return `data:${mimetype},${content.toString()}`;
+                }
+
+                return `data:${mimetype}${
+                  encoding ? `;${encoding}` : ''
+                },${content.toString(encoding)}`;
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+### `fallback`
+
 Type: `String`
-Default: `(file extension)`
+Default: `'file-loader'`
 
-Sets the MIME type for the file to be transformed. If unspecified the file extensions will be used to lookup the MIME type.
+Specifies an alternative loader to use when a target file's size exceeds the limit set in the `limit` option.
 
@@ -209,3 +321,3 @@ **webpack.config.js**
             options: {
-              mimetype: 'image/png',
+              fallback: require.resolve('responsive-loader'),
             },
@@ -220,2 +332,29 @@ },
 
+The fallback loader will receive the same configuration options as url-loader.
+
+For example, to set the quality option of a responsive-loader above use:
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpg|gif)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              fallback: require.resolve('responsive-loader'),
+              quality: 85,
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ### `esModule`
@@ -253,2 +392,34 @@
 
+## Examples
+
+### SVG
+
+SVG can be compressed into a more compact output, avoiding `base64`.
+You can read about it more [here](https://css-tricks.com/probably-dont-base64-svg/).
+You can do it using [mini-svg-data-uri](https://github.com/tigt/mini-svg-data-uri) package.
+
+**webpack.config.js**
+
+```js
+const svgToMiniDataURI = require('mini-svg-data-uri');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              generator: (content) => svgToMiniDataURI(content.toString()),
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ## Contributing
@@ -278,1 +449,5 @@
 [size-url]: https://packagephobia.now.sh/result?p=url-loader
+
+```
+
+```

No alert changes

Improved metrics

Total package byte prevSize

29722

increased by32.85%

Lines of code

206

increased by52.59%

Number of lines in readme file

441

increased by65.79%

Worsened metrics

Dev dependency count

26

increased by4%

No dependency changes