1 | <div align="center">
|
2 | <a href="https://github.com/webpack/webpack">
|
3 | <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
|
4 | </a>
|
5 | </div>
|
6 |
|
7 | [![npm][npm]][npm-url]
|
8 | [![node][node]][node-url]
|
9 | [![deps][deps]][deps-url]
|
10 | [![tests][tests]][tests-url]
|
11 | [![chat][chat]][chat-url]
|
12 | [![size][size]][size-url]
|
13 |
|
14 | # url-loader
|
15 |
|
16 | A loader for webpack which transforms files into base64 URIs.
|
17 |
|
18 | ## Getting Started
|
19 |
|
20 | To begin, you'll need to install `url-loader`:
|
21 |
|
22 | ```console
|
23 | $ npm install url-loader --save-dev
|
24 | ```
|
25 |
|
26 | `url-loader` works like
|
27 | [`file-loader`](https://github.com/webpack-contrib/file-loader), but can return
|
28 | a DataURL if the file is smaller than a byte limit.
|
29 |
|
30 | **index.js**
|
31 |
|
32 | ```js
|
33 | import img from './image.png';
|
34 | ```
|
35 |
|
36 | **webpack.config.js**
|
37 |
|
38 | ```js
|
39 | module.exports = {
|
40 | module: {
|
41 | rules: [
|
42 | {
|
43 | test: /\.(png|jpg|gif)$/i,
|
44 | use: [
|
45 | {
|
46 | loader: 'url-loader',
|
47 | options: {
|
48 | limit: 8192,
|
49 | },
|
50 | },
|
51 | ],
|
52 | },
|
53 | ],
|
54 | },
|
55 | };
|
56 | ```
|
57 |
|
58 | And run `webpack` via your preferred method.
|
59 |
|
60 | ## Options
|
61 |
|
62 | | Name | Type | Default | Description |
|
63 | | :---------------------------: | :-------------------------: | :-----------------------------------------------------------: | :---------------------------------------------------------------------------------- |
|
64 | | **[`limit`](#limit)** | `{Boolean\|Number\|String}` | `true` | Specifying the maximum size of a file in bytes. |
|
65 | | **[`mimetype`](#mimetype)** | `{Boolean\|String}` | based from [mime-types](https://github.com/jshttp/mime-types) | Sets the MIME type for the file to be transformed. |
|
66 | | **[`encoding`](#encoding)** | `{Boolean\|String}` | `base64` | Specify the encoding which the file will be inlined with. |
|
67 | | **[`generator`](#generator)** | `{Function}` | `() => type/subtype;encoding,base64_data` | You can create you own custom implementation for encoding data. |
|
68 | | **[`fallback`](#fallback)** | `{String}` | `file-loader` | Specifies an alternative loader to use when a target file's size exceeds the limit. |
|
69 | | **[`esModule`](#esmodule)** | `{Boolean}` | `true` | Use ES modules syntax. |
|
70 |
|
71 | ### `limit`
|
72 |
|
73 | Type: `Boolean|Number|String`
|
74 | Default: `undefined`
|
75 |
|
76 | The limit can be specified via loader options and defaults to no limit.
|
77 |
|
78 | #### `Boolean`
|
79 |
|
80 | Enable or disable transform files into base64.
|
81 |
|
82 | **webpack.config.js**
|
83 |
|
84 | ```js
|
85 | module.exports = {
|
86 | module: {
|
87 | rules: [
|
88 | {
|
89 | test: /\.(png|jpg|gif)$/i,
|
90 | use: [
|
91 | {
|
92 | loader: 'url-loader',
|
93 | options: {
|
94 | limit: false,
|
95 | },
|
96 | },
|
97 | ],
|
98 | },
|
99 | ],
|
100 | },
|
101 | };
|
102 | ```
|
103 |
|
104 | #### `Number|String`
|
105 |
|
106 | A `Number` or `String` specifying the maximum size of a file in bytes.
|
107 | 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.
|
108 |
|
109 | Using an alternative to `file-loader` is enabled via the `fallback` option.
|
110 |
|
111 | **webpack.config.js**
|
112 |
|
113 | ```js
|
114 | module.exports = {
|
115 | module: {
|
116 | rules: [
|
117 | {
|
118 | test: /\.(png|jpg|gif)$/i,
|
119 | use: [
|
120 | {
|
121 | loader: 'url-loader',
|
122 | options: {
|
123 | limit: 8192,
|
124 | },
|
125 | },
|
126 | ],
|
127 | },
|
128 | ],
|
129 | },
|
130 | };
|
131 | ```
|
132 |
|
133 | ### `mimetype`
|
134 |
|
135 | Type: `Boolean|String`
|
136 | Default: based from [mime-types](https://github.com/jshttp/mime-types)
|
137 |
|
138 | Specify the `mimetype` which the file will be inlined with.
|
139 | If unspecified the `mimetype` value will be used from [mime-types](https://github.com/jshttp/mime-types).
|
140 |
|
141 | #### `Boolean`
|
142 |
|
143 | The `true` value allows to generation the `mimetype` part from [mime-types](https://github.com/jshttp/mime-types).
|
144 | The `false` value removes the `mediatype` part from a Data URL (if omitted, defaults to `text/plain;charset=US-ASCII`).
|
145 |
|
146 | **webpack.config.js**
|
147 |
|
148 | ```js
|
149 | module.exports = {
|
150 | module: {
|
151 | rules: [
|
152 | {
|
153 | test: /\.(png|jpg|gif)$/i,
|
154 | use: [
|
155 | {
|
156 | loader: 'url-loader',
|
157 | options: {
|
158 | mimetype: false,
|
159 | },
|
160 | },
|
161 | ],
|
162 | },
|
163 | ],
|
164 | },
|
165 | };
|
166 | ```
|
167 |
|
168 | #### `String`
|
169 |
|
170 | Sets the MIME type for the file to be transformed.
|
171 |
|
172 | **webpack.config.js**
|
173 |
|
174 | ```js
|
175 | module.exports = {
|
176 | module: {
|
177 | rules: [
|
178 | {
|
179 | test: /\.(png|jpg|gif)$/i,
|
180 | use: [
|
181 | {
|
182 | loader: 'url-loader',
|
183 | options: {
|
184 | mimetype: 'image/png',
|
185 | },
|
186 | },
|
187 | ],
|
188 | },
|
189 | ],
|
190 | },
|
191 | };
|
192 | ```
|
193 |
|
194 | ### `encoding`
|
195 |
|
196 | Type: `Boolean|String`
|
197 | Default: `base64`
|
198 |
|
199 | Specify the `encoding` which the file will be inlined with.
|
200 | If unspecified the `encoding` will be `base64`.
|
201 |
|
202 | #### `Boolean`
|
203 |
|
204 | 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`.
|
205 |
|
206 | **webpack.config.js**
|
207 |
|
208 | ```js
|
209 | module.exports = {
|
210 | module: {
|
211 | rules: [
|
212 | {
|
213 | test: /\.svg$/i,
|
214 | use: [
|
215 | {
|
216 | loader: 'url-loader',
|
217 | options: {
|
218 | encoding: false,
|
219 | },
|
220 | },
|
221 | ],
|
222 | },
|
223 | ],
|
224 | },
|
225 | };
|
226 | ```
|
227 |
|
228 | #### `String`
|
229 |
|
230 | 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"]`.
|
231 |
|
232 | **webpack.config.js**
|
233 |
|
234 | ```js
|
235 | module.exports = {
|
236 | module: {
|
237 | rules: [
|
238 | {
|
239 | test: /\.svg$/i,
|
240 | use: [
|
241 | {
|
242 | loader: 'url-loader',
|
243 | options: {
|
244 | encoding: 'utf8',
|
245 | },
|
246 | },
|
247 | ],
|
248 | },
|
249 | ],
|
250 | },
|
251 | };
|
252 | ```
|
253 |
|
254 | ### `generator`
|
255 |
|
256 | Type: `Function`
|
257 | Default: `(mimetype, encoding, content, resourcePath) => mimetype;encoding,base64_content`
|
258 |
|
259 | You can create you own custom implementation for encoding data.
|
260 |
|
261 | **webpack.config.js**
|
262 |
|
263 | ```js
|
264 | module.exports = {
|
265 | module: {
|
266 | rules: [
|
267 | {
|
268 | test: /\.(png|html)$/i,
|
269 | use: [
|
270 | {
|
271 | loader: 'url-loader',
|
272 | options: {
|
273 | // The `mimetype` and `encoding` arguments will be obtained from your options
|
274 | // The `resourcePath` argument is path to file.
|
275 | generator: (content, mimetype, encoding, resourcePath) => {
|
276 | if (/\.html$/i.test(resourcePath)) {
|
277 | return `data:${mimetype},${content.toString()}`;
|
278 | }
|
279 |
|
280 | return `data:${mimetype}${
|
281 | encoding ? `;${encoding}` : ''
|
282 | },${content.toString(encoding)}`;
|
283 | },
|
284 | },
|
285 | },
|
286 | ],
|
287 | },
|
288 | ],
|
289 | },
|
290 | };
|
291 | ```
|
292 |
|
293 | ### `fallback`
|
294 |
|
295 | Type: `String`
|
296 | Default: `'file-loader'`
|
297 |
|
298 | Specifies an alternative loader to use when a target file's size exceeds the limit set in the `limit` option.
|
299 |
|
300 | **webpack.config.js**
|
301 |
|
302 | ```js
|
303 | module.exports = {
|
304 | module: {
|
305 | rules: [
|
306 | {
|
307 | test: /\.(png|jpg|gif)$/i,
|
308 | use: [
|
309 | {
|
310 | loader: 'url-loader',
|
311 | options: {
|
312 | fallback: require.resolve('responsive-loader'),
|
313 | },
|
314 | },
|
315 | ],
|
316 | },
|
317 | ],
|
318 | },
|
319 | };
|
320 | ```
|
321 |
|
322 | The fallback loader will receive the same configuration options as url-loader.
|
323 |
|
324 | For example, to set the quality option of a responsive-loader above use:
|
325 |
|
326 | **webpack.config.js**
|
327 |
|
328 | ```js
|
329 | module.exports = {
|
330 | module: {
|
331 | rules: [
|
332 | {
|
333 | test: /\.(png|jpg|gif)$/i,
|
334 | use: [
|
335 | {
|
336 | loader: 'url-loader',
|
337 | options: {
|
338 | fallback: require.resolve('responsive-loader'),
|
339 | quality: 85,
|
340 | },
|
341 | },
|
342 | ],
|
343 | },
|
344 | ],
|
345 | },
|
346 | };
|
347 | ```
|
348 |
|
349 | ### `esModule`
|
350 |
|
351 | Type: `Boolean`
|
352 | Default: `true`
|
353 |
|
354 | By default, `file-loader` generates JS modules that use the ES modules syntax.
|
355 | There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
|
356 |
|
357 | You can enable a CommonJS module syntax using:
|
358 |
|
359 | **webpack.config.js**
|
360 |
|
361 | ```js
|
362 | module.exports = {
|
363 | module: {
|
364 | rules: [
|
365 | {
|
366 | test: /\.css$/,
|
367 | use: [
|
368 | {
|
369 | loader: 'url-loader',
|
370 | options: {
|
371 | esModule: false,
|
372 | },
|
373 | },
|
374 | ],
|
375 | },
|
376 | ],
|
377 | },
|
378 | };
|
379 | ```
|
380 |
|
381 | ## Examples
|
382 |
|
383 | ### SVG
|
384 |
|
385 | SVG can be compressed into a more compact output, avoiding `base64`.
|
386 | You can read about it more [here](https://css-tricks.com/probably-dont-base64-svg/).
|
387 | You can do it using [mini-svg-data-uri](https://github.com/tigt/mini-svg-data-uri) package.
|
388 |
|
389 | **webpack.config.js**
|
390 |
|
391 | ```js
|
392 | const svgToMiniDataURI = require('mini-svg-data-uri');
|
393 |
|
394 | module.exports = {
|
395 | module: {
|
396 | rules: [
|
397 | {
|
398 | test: /\.svg$/i,
|
399 | use: [
|
400 | {
|
401 | loader: 'url-loader',
|
402 | options: {
|
403 | generator: (content) => svgToMiniDataURI(content.toString()),
|
404 | },
|
405 | },
|
406 | ],
|
407 | },
|
408 | ],
|
409 | },
|
410 | };
|
411 | ```
|
412 |
|
413 | ## Contributing
|
414 |
|
415 | Please take a moment to read our contributing guidelines if you haven't yet done so.
|
416 |
|
417 | [CONTRIBUTING](./.github/CONTRIBUTING.md)
|
418 |
|
419 | ## License
|
420 |
|
421 | [MIT](./LICENSE)
|
422 |
|
423 | [npm]: https://img.shields.io/npm/v/url-loader.svg
|
424 | [npm-url]: https://npmjs.com/package/url-loader
|
425 | [node]: https://img.shields.io/node/v/url-loader.svg
|
426 | [node-url]: https://nodejs.org
|
427 | [deps]: https://david-dm.org/webpack-contrib/url-loader.svg
|
428 | [deps-url]: https://david-dm.org/webpack-contrib/url-loader
|
429 | [tests]: https://github.com/webpack-contrib/url-loader/workflows/url-loader/badge.svg
|
430 | [tests-url]: https://github.com/webpack-contrib/url-loader/actions
|
431 | [cover]: https://codecov.io/gh/webpack-contrib/url-loader/branch/master/graph/badge.svg
|
432 | [cover-url]: https://codecov.io/gh/webpack-contrib/url-loader
|
433 | [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
|
434 | [chat-url]: https://gitter.im/webpack/webpack
|
435 | [size]: https://packagephobia.now.sh/badge?p=url-loader
|
436 | [size-url]: https://packagephobia.now.sh/result?p=url-loader
|
437 |
|
438 | ```
|
439 |
|
440 | ```
|