You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

396 lines
7.2 KiB

4 years ago
  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. # file-loader
  12. A file loader module for webpack
  13. ## Requirements
  14. This module requires a minimum of Node v6.9.0 and works with Webpack v3 and Webpack v4.
  15. ## Getting Started
  16. To begin, you'll need to install `file-loader`:
  17. ```console
  18. $ npm install file-loader --save-dev
  19. ```
  20. Import (or `require`) the target file(s) in one of the bundle's files:
  21. ```js
  22. // bundle file
  23. import img from './file.png'
  24. ```
  25. Then add the loader to your `webpack` config. For example:
  26. ```js
  27. // webpack.config.js
  28. module.exports = {
  29. module: {
  30. rules: [
  31. {
  32. test: /\.(png|jpg|gif)$/,
  33. use: [
  34. {
  35. loader: 'file-loader',
  36. options: {}
  37. }
  38. ]
  39. }
  40. ]
  41. }
  42. }
  43. ```
  44. And run `webpack` via your preferred method. This will emit `file.png` as a file
  45. in the output directory (with the specified naming convention, if options are
  46. specified to do so) and returns the public URI of the file.
  47. _Note: By default the filename of the resulting file is the MD5 hash of the
  48. file's contents with the original extension of the required resource._
  49. ## Options
  50. ### `context`
  51. Type: `String`
  52. Default: [`context`](https://webpack.js.org/configuration/entry-context/#context)
  53. Specifies a custom file context.
  54. ```js
  55. // webpack.config.js
  56. ...
  57. {
  58. loader: 'file-loader',
  59. options: {
  60. name: '[path][name].[ext]',
  61. context: ''
  62. }
  63. }
  64. ...
  65. ```
  66. ### `emitFile`
  67. Type: `Boolean`
  68. Default: `true`
  69. If true, emits a file (writes a file to the filesystem). If false, the loader
  70. will return a public URI but _will not_ emit the file. It is often useful to
  71. disable this option for server-side packages.
  72. ```js
  73. // bundle file
  74. import img from './file.png'
  75. ```
  76. ```js
  77. // webpack.config.js
  78. ...
  79. {
  80. loader: 'file-loader',
  81. options: {
  82. emitFile: false
  83. }
  84. }
  85. ...
  86. ```
  87. ### `name`
  88. Type: `String|Function`
  89. Default: `'[hash].[ext]'`
  90. Specifies a custom filename template for the target file(s) using the query
  91. parameter `name`. For example, to copy a file from your `context` directory into
  92. the output directory retaining the full directory structure, you might use:
  93. ```js
  94. // webpack.config.js
  95. {
  96. loader: 'file-loader',
  97. options: {
  98. name: '[path][name].[ext]'
  99. }
  100. }
  101. ```
  102. Or using a `Function`:
  103. ```js
  104. // webpack.config.js
  105. ...
  106. {
  107. loader: 'file-loader',
  108. options: {
  109. name (file) {
  110. if (env === 'development') {
  111. return '[path][name].[ext]'
  112. }
  113. return '[hash].[ext]'
  114. }
  115. }
  116. }
  117. ...
  118. ```
  119. _Note: By default the path and name you specify will output the file in that
  120. same directory, and will also use the same URI path to access the file._
  121. ### `outputPath`
  122. Type: `String|Function`
  123. Default: `undefined`
  124. Specify a filesystem path where the target file(s) will be placed.
  125. ```js
  126. // webpack.config.js
  127. ...
  128. {
  129. loader: 'file-loader',
  130. options: {
  131. name: '[path][name].[ext]',
  132. outputPath: 'images/'
  133. }
  134. }
  135. ...
  136. ```
  137. ### `publicPath`
  138. Type: `String|Function`
  139. Default: [`__webpack_public_path__`](https://webpack.js.org/api/module-variables/#__webpack_public_path__-webpack-specific-)
  140. Specifies a custom public path for the target file(s).
  141. ```js
  142. // webpack.config.js
  143. ...
  144. {
  145. loader: 'file-loader',
  146. options: {
  147. name: '[path][name].[ext]',
  148. publicPath: 'assets/'
  149. }
  150. }
  151. ...
  152. ```
  153. ### `regExp`
  154. Type: `RegExp`
  155. Default: `undefined`
  156. Specifies a Regular Expression to one or many parts of the target file path.
  157. The capture groups can be reused in the `name` property using `[N]`
  158. [placeholder](https://github.com/webpack-contrib/file-loader#placeholders).
  159. ```js
  160. import img from './customer01/file.png'
  161. ```
  162. **webpack.config.js**
  163. ```js
  164. {
  165. loader: 'file-loader',
  166. options: {
  167. regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/,
  168. name: '[1]-[name].[ext]'
  169. }
  170. }
  171. ```
  172. _Note: If `[0]` is used, it will be replaced by the entire tested string,
  173. whereas `[1]` will contain the first capturing parenthesis of your regex and so
  174. on..._
  175. ### `useRelativePath`
  176. Type: `Boolean`
  177. Default: `false`
  178. Specifies whether or not to generate a relative URI for each target file context.
  179. ```js
  180. // webpack.config.js
  181. {
  182. loader: 'file-loader',
  183. options: {
  184. useRelativePath: process.env.NODE_ENV === "production"
  185. }
  186. }
  187. ```
  188. ## Placeholders
  189. ### `[ext]`
  190. Type: `String`
  191. Default: `file.extname`
  192. The file extension of the target file/resource.
  193. ### `[hash]`
  194. Type: `String`
  195. Default: `'md5'`
  196. Specifies the hash method to use for hashing the file content. See
  197. [Hashes](https://github.com/webpack-contrib/file-loader#hashes).
  198. ### `[N]`
  199. Type: `String`
  200. Default: `undefined`
  201. The n-th match obtained from matching the current file name against the regExp
  202. ### `[name]`
  203. Type: `String`
  204. Default: `file.basename`
  205. The basename of the file/resource.
  206. ### `[path]`
  207. Type: `String`
  208. Default: `file.dirname`
  209. The path of the resource relative to the webpack/config context.
  210. ## Hashes
  211. Custom hashes can be used by specifying a hash with the following format:
  212. `[<hashType>:hash:<digestType>:<length>]`.
  213. ### `digestType`
  214. Type: `String`
  215. Default: `'hex'`
  216. The [digest](https://en.wikipedia.org/wiki/Cryptographic_hash_function) that the
  217. hash function should use. Valid values include: base26, base32, base36,
  218. base49, base52, base58, base62, base64, and hex.
  219. ### `hashType`
  220. Type: `String`
  221. Default: `'md5'`
  222. The type of hash that the has function should use. Valid values include: md5,
  223. sha1, sha256, and sha512.
  224. ### `length`
  225. Type: `Number`
  226. Default: `9999`
  227. Users may also specify a length for the computed hash.
  228. ## Examples
  229. The following examples show how one might use `file-loader` and what the result
  230. would be.
  231. ```js
  232. // bundle file
  233. import png from 'image.png'
  234. ```
  235. ```js
  236. // webpack.config.js
  237. {
  238. loader: 'file-loader',
  239. options: {
  240. name: 'dirname/[hash].[ext]'
  241. }
  242. }
  243. ```
  244. ```bash
  245. # result
  246. dirname/0dcbbaa701328ae351f.png
  247. ```
  248. ---
  249. ```js
  250. // webpack.config.js
  251. {
  252. loader: 'file-loader',
  253. options: {
  254. name: '[sha512:hash:base64:7].[ext]'
  255. }
  256. }
  257. ```
  258. ```bash
  259. # result
  260. gdyb21L.png
  261. ```
  262. ---
  263. ```js
  264. // bundle file
  265. import png from 'path/to/file.png'
  266. ```
  267. ```js
  268. // webpack.config.js
  269. {
  270. loader: 'file-loader',
  271. options: {
  272. name: '[path][name].[ext]?[hash]'
  273. }
  274. }
  275. ```
  276. ```bash
  277. # result
  278. path/to/file.png?e43b20c069c4a01867c31e98cbce33c9
  279. ```
  280. ## Contributing
  281. Please take a moment to read our contributing guidelines if you haven't yet done so.
  282. #### [CONTRIBUTING](./.github/CONTRIBUTING.md)
  283. ## License
  284. #### [MIT](./LICENSE)
  285. [npm]: https://img.shields.io/npm/v/file-loader.svg
  286. [npm-url]: https://npmjs.com/package/file-loader
  287. [node]: https://img.shields.io/node/v/file-loader.svg
  288. [node-url]: https://nodejs.org
  289. [deps]: https://david-dm.org/webpack-contrib/file-loader.svg
  290. [deps-url]: https://david-dm.org/webpack-contrib/file-loader
  291. [tests]: https://img.shields.io/circleci/project/github/webpack-contrib/file-loader.svg
  292. [tests-url]: https://circleci.com/gh/webpack-contrib/file-loader
  293. [cover]: https://codecov.io/gh/webpack-contrib/file-loader/branch/master/graph/badge.svg
  294. [cover-url]: https://codecov.io/gh/webpack-contrib/file-loader
  295. [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
  296. [chat-url]: https://gitter.im/webpack/webpack