1dca10e11811c2cda414676815a17d36cccdf9fb437519613af79c3a61521a6e52efd35f3f2296338eb75a5913e959e6eb2016eea7e7a5f96ef91f5822dd59 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. [![npm][npm]][npm-url]
  2. [![node][node]][node-url]
  3. [![deps][deps]][deps-url]
  4. [![tests][tests]][tests-url]
  5. [![coverage][cover]][cover-url]
  6. [![chat][chat]][chat-url]
  7. <div align="center">
  8. <a href="https://github.com/webpack/webpack">
  9. <img width="200" height="200"
  10. src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">
  11. </a>
  12. <h1>URL Loader</h1>
  13. <p>Loads files as `base64` encoded URL</p>
  14. </div>
  15. <h2 align="center">Install</h2>
  16. ```bash
  17. npm install --save-dev url-loader
  18. ```
  19. <h2 align="center"><a href="https://webpack.js.org/concepts/loaders">Usage</a></h2>
  20. The `url-loader` works like the [`file-loader`](https://github.com/webpack-contrib/file-loader), but can return a DataURL if the file is smaller than a byte limit.
  21. ```js
  22. import img from './image.png'
  23. ```
  24. **webpack.config.js**
  25. ```js
  26. module.exports = {
  27. module: {
  28. rules: [
  29. {
  30. test: /\.(png|jpg|gif)$/,
  31. use: [
  32. {
  33. loader: 'url-loader'
  34. options: {
  35. limit: 8192
  36. }
  37. }
  38. ]
  39. }
  40. ]
  41. }
  42. }
  43. ```
  44. <h2 align="center">Options</h2>
  45. |Name|Type|Default|Description|
  46. |:--:|:--:|:-----:|:----------|
  47. |**`limit`**|`{Number}`|`undefined`|Byte limit to inline files as Data URL|
  48. |**`mimetype`**|`{String}`|`extname`|Specify MIME type for the file (Otherwise it's inferred from the file extension)|
  49. |**`prefix`**|`{String}`|`false`|Parameters for the [`file-loader`](https://github.com/webpack-contrib/file-loader) are valid too. They are passed to the file-loader if used|
  50. ### `limit`
  51. If the file is greater than the limit (in bytes) the [`file-loader`](https://github.com/webpack-contrib/file-loader) is used and all query parameters are passed to it.
  52. The limit can be specified via loader options and defaults to no limit.
  53. **webpack.config.js**
  54. ```js
  55. {
  56. loader: 'url-loader',
  57. options: {
  58. limit: 8192
  59. }
  60. }
  61. ```
  62. ### `mimetype`
  63. Set the MIME type for the file. If unspecified the file extensions will be used to lookup the MIME type.
  64. **webpack.config.js**
  65. ```js
  66. {
  67. loader: 'url-loader',
  68. options: {
  69. mimetype: 'image/png'
  70. }
  71. }
  72. ```
  73. ### `prefix`
  74. ```js
  75. {
  76. loader: 'url-loader',
  77. options: {
  78. prefix: 'img'
  79. }
  80. }
  81. ```
  82. <h2 align="center">Maintainers</h2>
  83. <table>
  84. <tbody>
  85. <tr>
  86. <td align="center">
  87. <a href="https://github.com/bebraw">
  88. <img width="150" height="150" src="https://github.com/bebraw.png?v=3&s=150">
  89. </br>
  90. Juho Vepsäläinen
  91. </a>
  92. </td>
  93. <td align="center">
  94. <a href="https://github.com/d3viant0ne">
  95. <img width="150" height="150" src="https://github.com/d3viant0ne.png?v=3&s=150">
  96. </br>
  97. Joshua Wiens
  98. </a>
  99. </td>
  100. <td align="center">
  101. <a href="https://github.com/sapegin">
  102. <img width="150" height="150" src="https://github.com/sapegin.png?v=3&s=150">
  103. </br>
  104. Artem Sapegin
  105. </a>
  106. </td>
  107. <td align="center">
  108. <a href="https://github.com/michael-ciniawsky">
  109. <img width="150" height="150" src="https://github.com/michael-ciniawsky.png?v=3&s=150">
  110. </br>
  111. Michael Ciniawsky
  112. </a>
  113. </td>
  114. <td align="center">
  115. <a href="https://github.com/evilebottnawi">
  116. <img width="150" height="150" src="https://github.com/evilebottnawi.png?v=3&s=150">
  117. </br>
  118. Alexander Krasnoyarov
  119. </a>
  120. </td>
  121. </tr>
  122. <tbody>
  123. </table>
  124. [npm]: https://img.shields.io/npm/v/url-loader.svg
  125. [npm-url]: https://npmjs.com/package/url-loader
  126. [node]: https://img.shields.io/node/v/url-loader.svg
  127. [node-url]: https://nodejs.org
  128. [deps]: https://david-dm.org/webpack-contrib/url-loader.svg
  129. [deps-url]: https://david-dm.org/webpack-contrib/url-loader
  130. [tests]: http://img.shields.io/travis/webpack-contrib/url-loader.svg
  131. [tests-url]: https://travis-ci.org/webpack-contrib/url-loader
  132. [cover]: https://coveralls.io/repos/github/webpack-contrib/url-loader/badge.svg
  133. [cover-url]: https://coveralls.io/github/webpack-contrib/url-loader
  134. [chat]: https://badges.gitter.im/webpack/webpack.svg
  135. [chat-url]: https://gitter.im/webpack/webpack