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

Commit 36f1354

Browse files
authored
feat: add encoding & generator options (#210)
1 parent 8828d64 commit 36f1354

9 files changed

+925
-3
lines changed

README.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,94 @@ module.exports = {
207207
};
208208
```
209209

210+
### `encoding`
211+
212+
Type: `String|Boolean`
213+
Default: `base64`
214+
215+
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"]`.
216+
217+
> 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`.
218+
219+
**webpack.config.js**
220+
221+
```js
222+
module.exports = {
223+
module: {
224+
rules: [
225+
{
226+
test: /\.svg$/i,
227+
use: [
228+
{
229+
loader: 'url-loader',
230+
options: {
231+
encoding: 'utf8',
232+
},
233+
},
234+
],
235+
},
236+
],
237+
},
238+
};
239+
```
240+
241+
### `generator`
242+
243+
Type: `Function`
244+
245+
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.
246+
247+
**webpack.config.js**
248+
249+
```js
250+
module.exports = {
251+
module: {
252+
rules: [
253+
{
254+
test: /\.svg$/i,
255+
use: [
256+
{
257+
loader: 'url-loader',
258+
options: {
259+
generator: (svgContentBuffer) => {
260+
const svgToMiniDataURI = require('mini-svg-data-uri');
261+
262+
return svgToMiniDataURI(svgContentBuffer.toString());
263+
},
264+
},
265+
},
266+
],
267+
},
268+
],
269+
},
270+
};
271+
```
272+
273+
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:
274+
275+
**webpack.config.js**
276+
277+
```js
278+
module.exports = {
279+
module: {
280+
rules: [
281+
{
282+
test: /\.svg$/i,
283+
use: [
284+
{
285+
loader: 'url-loader',
286+
options: {
287+
generator: (svgContentBuffer) =>
288+
`data:image/svg;utf8,${svgContentBuffer.toString('utf8')}`,
289+
},
290+
},
291+
],
292+
},
293+
],
294+
},
295+
};
296+
```
297+
210298
### `esModule`
211299

212300
Type: `Boolean`

package-lock.json

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
"jest-junit": "^10.0.0",
7474
"lint-staged": "^10.0.8",
7575
"memfs": "^3.1.2",
76+
"mini-svg-data-uri": "^1.1.3",
7677
"npm-run-all": "^4.1.5",
7778
"prettier": "^1.19.1",
7879
"standard-version": "^7.1.0",

src/index.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@ export default function loader(src) {
3737
const file = this.resourcePath;
3838
const mimetype = options.mimetype || mime.contentType(path.extname(file));
3939

40+
const encoding =
41+
options.encoding === true || typeof options.encoding === 'undefined'
42+
? 'base64'
43+
: options.encoding;
44+
4045
if (typeof src === 'string') {
4146
// eslint-disable-next-line no-param-reassign
4247
src = Buffer.from(src);
@@ -45,11 +50,15 @@ export default function loader(src) {
4550
const esModule =
4651
typeof options.esModule !== 'undefined' ? options.esModule : true;
4752

53+
const encodedData = options.generator
54+
? options.generator(src)
55+
: `data:${mimetype || ''}${encoding ? `;${encoding}` : ''},${
56+
encoding ? src.toString(encoding) : src.toString()
57+
}`;
58+
4859
return `${
4960
esModule ? 'export default' : 'module.exports ='
50-
} ${JSON.stringify(
51-
`data:${mimetype || ''};base64,${src.toString('base64')}`
52-
)}`;
61+
} ${JSON.stringify(encodedData)}`;
5362
}
5463

5564
// Normalize the fallback.

src/options.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,30 @@
55
"description": "Enables/Disables transformation target file into base64 URIs (https://github.com/webpack-contrib/url-loader#limit).",
66
"type": ["boolean", "number", "string"]
77
},
8+
"encoding": {
9+
"description": "Specify the encoding which the file will be in-lined with.",
10+
"oneOf": [
11+
{
12+
"enum": [
13+
"utf8",
14+
"utf16le",
15+
"latin1",
16+
"base64",
17+
"hex",
18+
"ascii",
19+
"binary",
20+
"ucs2"
21+
]
22+
},
23+
{
24+
"type": "boolean"
25+
}
26+
]
27+
},
28+
"generator": {
29+
"description": "Adding custom implementation for encoding files.",
30+
"instanceof": "Function"
31+
},
832
"mimetype": {
933
"description": "The MIME type for the file to be transformed (https://github.com/webpack-contrib/url-loader#mimetype).",
1034
"type": "string"

test/__snapshots__/encoding-option.test.js.snap

Lines changed: 378 additions & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy