Skip to content
This repository has been archived by the owner on Mar 17, 2021. It is now read-only.

Commit

Permalink
feat: add encoding & generator options (#210)
Browse files Browse the repository at this point in the history
  • Loading branch information
EslamHiko authored Apr 8, 2020
1 parent 8828d64 commit 36f1354
Show file tree
Hide file tree
Showing 9 changed files with 925 additions and 3 deletions.
88 changes: 88 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,94 @@ 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"]`.

> 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: 'utf8',
},
},
],
},
],
},
};
```

### `generator`

Type: `Function`

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.

**webpack.config.js**

```js
module.exports = {
module: {
rules: [
{
test: /\.svg$/i,
use: [
{
loader: 'url-loader',
options: {
generator: (svgContentBuffer) => {
const svgToMiniDataURI = require('mini-svg-data-uri');

return svgToMiniDataURI(svgContentBuffer.toString());
},
},
},
],
},
],
},
};
```

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:

**webpack.config.js**

```js
module.exports = {
module: {
rules: [
{
test: /\.svg$/i,
use: [
{
loader: 'url-loader',
options: {
generator: (svgContentBuffer) =>
`data:image/svg;utf8,${svgContentBuffer.toString('utf8')}`,
},
},
],
},
],
},
};
```

### `esModule`

Type: `Boolean`
Expand Down
6 changes: 6 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@
"jest-junit": "^10.0.0",
"lint-staged": "^10.0.8",
"memfs": "^3.1.2",
"mini-svg-data-uri": "^1.1.3",
"npm-run-all": "^4.1.5",
"prettier": "^1.19.1",
"standard-version": "^7.1.0",
Expand Down
15 changes: 12 additions & 3 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,11 @@ export default function loader(src) {
const file = this.resourcePath;
const mimetype = options.mimetype || mime.contentType(path.extname(file));

const encoding =
options.encoding === true || typeof options.encoding === 'undefined'
? 'base64'
: options.encoding;

if (typeof src === 'string') {
// eslint-disable-next-line no-param-reassign
src = Buffer.from(src);
Expand All @@ -45,11 +50,15 @@ export default function loader(src) {
const esModule =
typeof options.esModule !== 'undefined' ? options.esModule : true;

const encodedData = options.generator
? options.generator(src)
: `data:${mimetype || ''}${encoding ? `;${encoding}` : ''},${
encoding ? src.toString(encoding) : src.toString()
}`;

return `${
esModule ? 'export default' : 'module.exports ='
} ${JSON.stringify(
`data:${mimetype || ''};base64,${src.toString('base64')}`
)}`;
} ${JSON.stringify(encodedData)}`;
}

// Normalize the fallback.
Expand Down
24 changes: 24 additions & 0 deletions src/options.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,30 @@
"description": "Enables/Disables transformation target file into base64 URIs (https://github.com/webpack-contrib/url-loader#limit).",
"type": ["boolean", "number", "string"]
},
"encoding": {
"description": "Specify the encoding which the file will be in-lined with.",
"oneOf": [
{
"enum": [
"utf8",
"utf16le",
"latin1",
"base64",
"hex",
"ascii",
"binary",
"ucs2"
]
},
{
"type": "boolean"
}
]
},
"generator": {
"description": "Adding custom implementation for encoding files.",
"instanceof": "Function"
},
"mimetype": {
"description": "The MIME type for the file to be transformed (https://github.com/webpack-contrib/url-loader#mimetype).",
"type": "string"
Expand Down
378 changes: 378 additions & 0 deletions test/__snapshots__/encoding-option.test.js.snap

Large diffs are not rendered by default.

Loading

0 comments on commit 36f1354

Please sign in to comment.