refactor: code (#212)

webpack-contrib · Apr 8, 2020 · 488b6ec · 488b6ec
1 parent 36f1354
commit 488b6ec
Show file tree

Hide file tree

Showing 25 changed files with 1,504 additions and 1,112 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,5 +1 @@
-module.exports = {
-  singleQuote: true,
-  trailingComma: 'es5',
-  arrowParens: 'always',
-};
+module.exports = { singleQuote: true };
diff --git a/README.md b/README.md
@@ -59,13 +59,25 @@ And run `webpack` via your preferred method.
 
 ## Options
 
-### `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**
 
@@ -79,7 +91,7 @@ module.exports = {
           {
             loader: 'url-loader',
             options: {
-              fallback: require.resolve('responsive-loader'),
+              limit: false,
             },
           },
         ],
@@ -89,9 +101,12 @@ module.exports = {
 };
 ```
 
-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**
 
@@ -105,8 +120,7 @@ module.exports = {
           {
             loader: 'url-loader',
             options: {
-              fallback: require.resolve('responsive-loader'),
-              quality: 85,
+              limit: 8192,
             },
           },
         ],
@@ -116,19 +130,18 @@ module.exports = {
 };
 ```
 
-### `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`).
 
 **webpack.config.js**
 
@@ -142,7 +155,7 @@ module.exports = {
           {
             loader: 'url-loader',
             options: {
-              limit: 8192,
+              mimetype: false,
             },
           },
         ],
@@ -152,9 +165,9 @@ module.exports = {
 };
 ```
 
-#### `Boolean`
+#### `String`
 
-Enable or disable transform files into base64.
+Sets the MIME type for the file to be transformed.
 
 **webpack.config.js**
 
@@ -168,7 +181,7 @@ module.exports = {
           {
             loader: 'url-loader',
             options: {
-              limit: false,
+              mimetype: 'image/png',
             },
           },
         ],
@@ -178,12 +191,17 @@ module.exports = {
 };
 ```
 
-### `mimetype`
+### `encoding`
 
-Type: `String`
-Default: `(file extension)`
+Type: `Boolean|String`
+Default: `base64`
+
+Specify the `encoding` which the file will be inlined with.
+If unspecified the `encoding` will be `base64`.
+
+#### `Boolean`
 
-Sets the MIME type for the file to be transformed. If unspecified the file extensions will be used to lookup the MIME type.
+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**
 
@@ -192,12 +210,12 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(png|jpg|gif)$/i,
+        test: /\.svg$/i,
         use: [
           {
             loader: 'url-loader',
             options: {
-              mimetype: 'image/png',
+              encoding: false,
             },
           },
         ],
@@ -207,14 +225,9 @@ module.exports = {
 };
 ```
 
-### `encoding`
-
-Type: `String|Boolean`
-Default: `base64`
-
-Specify the encoding which the file will be in-lined with. 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"]`.
+#### `String`
 
-> 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`.
+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**
 
@@ -241,8 +254,9 @@ module.exports = {
 ### `generator`
 
 Type: `Function`
+Default: `(mimetype, encoding, content, resourcePath) => mimetype;encoding,base64_content`
 
-You can create you own custom implementation for encoding data. `generator` argument is a [`Buffer`](https://nodejs.org/api/buffer.html) instance of the file. in the example we are compressing svg files using [mini-svg-data-uri](https://github.com/tigt/mini-svg-data-uri) implementation.
+You can create you own custom implementation for encoding data.
 
 **webpack.config.js**
 
@@ -251,15 +265,21 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.svg$/i,
+        test: /\.(png|html)$/i,
         use: [
           {
             loader: 'url-loader',
             options: {
-              generator: (svgContentBuffer) => {
-                const svgToMiniDataURI = require('mini-svg-data-uri');
-
-                return svgToMiniDataURI(svgContentBuffer.toString());
+              // 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)}`;
               },
             },
           },
@@ -270,7 +290,12 @@ module.exports = {
 };
 ```
 
-By using your own implementation, `mimetype` and `encoding` won't have effect on the final output. until you specify them in the output manually for Example:
+### `fallback`
+
+Type: `String`
+Default: `'file-loader'`
+
+Specifies an alternative loader to use when a target file's size exceeds the limit set in the `limit` option.
 
 **webpack.config.js**
 
@@ -279,13 +304,39 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.svg$/i,
+        test: /\.(png|jpg|gif)$/i,
         use: [
           {
             loader: 'url-loader',
             options: {
-              generator: (svgContentBuffer) =>
-                `data:image/svg;utf8,${svgContentBuffer.toString('utf8')}`,
+              fallback: require.resolve('responsive-loader'),
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+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,
             },
           },
         ],
@@ -327,6 +378,38 @@ module.exports = {
 };
 ```
 
+## 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
 
 Please take a moment to read our contributing guidelines if you haven't yet done so.
@@ -351,3 +434,7 @@ Please take a moment to read our contributing guidelines if you haven't yet done
 [chat-url]: https://gitter.im/webpack/webpack
 [size]: https://packagephobia.now.sh/badge?p=url-loader
 [size-url]: https://packagephobia.now.sh/result?p=url-loader
+
+```
+
+```
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -1,4 +1,4 @@
 module.exports = {
-  '*.js': ['prettier --write', 'eslint --fix', 'git add'],
-  '*.{json,md,yml,css,ts}': ['prettier --write', 'git add'],
+  '*.js': ['prettier --write', 'eslint --fix'],
+  '*.{json,md,yml,css,ts}': ['prettier --write'],
 };