Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

README.md 3.5 KiB

il y a 3 ans
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  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. [![npm][npm]][npm-url]
  7. [![node][node]][node-url]
  8. [![deps][deps]][deps-url]
  9. [![tests][tests]][tests-url]
  10. [![chat][chat]][chat-url]
  11. [![size][size]][size-url]
  12. # url-loader
  13. A loader for webpack which transforms files into base64 URIs.
  14. ## Requirements
  15. This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.
  16. ## Getting Started
  17. To begin, you'll need to install `url-loader`:
  18. ```console
  19. $ npm install url-loader --save-dev
  20. ```
  21. `url-loader` works like
  22. [`file-loader`](https://github.com/webpack-contrib/file-loader), but can return
  23. a DataURL if the file is smaller than a byte limit.
  24. ```js
  25. import img from './image.png'
  26. ```
  27. ```js
  28. // webpack.config.js
  29. module.exports = {
  30. module: {
  31. rules: [
  32. {
  33. test: /\.(png|jpg|gif)$/i,
  34. use: [
  35. {
  36. loader: 'url-loader',
  37. options: {
  38. limit: 8192
  39. }
  40. }
  41. ]
  42. }
  43. ]
  44. }
  45. }
  46. ```
  47. And run `webpack` via your preferred method.
  48. ## Options
  49. ### `fallback`
  50. Type: `String`
  51. Default: `'file-loader'`
  52. Specifies an alternative loader to use when a target file's size exceeds the
  53. limit set in the `limit` option.
  54. ```js
  55. // webpack.config.js
  56. {
  57. loader: 'url-loader',
  58. options: {
  59. fallback: 'responsive-loader'
  60. }
  61. }
  62. ```
  63. The fallback loader will receive the same configuration options as url-loader.
  64. For example, to set the quality option of a responsive-loader above use:
  65. ```js
  66. {
  67. loader: 'url-loader',
  68. options: {
  69. fallback: 'responsive-loader',
  70. quality: 85
  71. }
  72. }
  73. ```
  74. ### `limit`
  75. Type: `Number`
  76. Default: `undefined`
  77. A `Number` specifying the maximum size of a file in bytes. If the file is
  78. greater than the limit,
  79. [`file-loader`](https://github.com/webpack-contrib/file-loader) is used by
  80. default and all query parameters are passed to it. Using an alternative to
  81. `file-loader` is enabled via the `fallback` option.
  82. The limit can be specified via loader options and defaults to no limit.
  83. ```js
  84. // webpack.config.js
  85. {
  86. loader: 'url-loader',
  87. options: {
  88. limit: 8192
  89. }
  90. }
  91. ```
  92. ### `mimetype`
  93. Type: `String`
  94. Default: `(file extension)`
  95. Sets the MIME type for the file to be transformed. If unspecified the file
  96. extensions will be used to lookup the MIME type.
  97. ```js
  98. // webpack.config.js
  99. {
  100. loader: 'url-loader',
  101. options: {
  102. mimetype: 'image/png'
  103. }
  104. }
  105. ```
  106. ## Contributing
  107. Please take a moment to read our contributing guidelines if you haven't yet done so.
  108. #### [CONTRIBUTING](./.github/CONTRIBUTING.md)
  109. ## License
  110. #### [MIT](./LICENSE)
  111. [npm]: https://img.shields.io/npm/v/url-loader.svg
  112. [npm-url]: https://npmjs.com/package/url-loader
  113. [node]: https://img.shields.io/node/v/url-loader.svg
  114. [node-url]: https://nodejs.org
  115. [deps]: https://david-dm.org/webpack-contrib/url-loader.svg
  116. [deps-url]: https://david-dm.org/webpack-contrib/url-loader
  117. [tests]: https://img.shields.io/circleci/project/github/webpack-contrib/url-loader.svg
  118. [tests-url]: https://circleci.com/gh/webpack-contrib/url-loader
  119. [cover]: https://codecov.io/gh/webpack-contrib/url-loader/branch/master/graph/badge.svg
  120. [cover-url]: https://codecov.io/gh/webpack-contrib/url-loader
  121. [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
  122. [chat-url]: https://gitter.im/webpack/webpack
  123. [size]: https://packagephobia.now.sh/badge?p=url-loader
  124. [size-url]: https://packagephobia.now.sh/result?p=url-loader