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

+88
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

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+1
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

+12-3
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

+24
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

+378
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)