1abe5ede97524aaa968a2e6f7a08720d1c1ce97cd21ad2c11f04cf1efed044423c80d75208a5a730218e035a9b5c058772e745eca6a1f3718ebf6d3c6ef3bd 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. # loader-utils
  2. ## Methods
  3. ### `getLoaderConfig`
  4. Recommended way to retrieve the loader config:
  5. ```javascript
  6. // inside your loader
  7. config = loaderUtils.getLoaderConfig(this, "myLoader");
  8. ```
  9. Tries to read the loader config from the `webpack.config.js` under the given property name (`"myLoader"` in this case) and merges the result with the loader query. For example, if your `webpack.config.js` had this property...
  10. ```javascript
  11. cheesecakeLoader: {
  12. type: "delicious",
  13. slices: 4
  14. }
  15. ```
  16. ...and your loader was called with `?slices=8`, `getLoaderConfig(this, "cheesecakeLoader")` would return
  17. ```javascript
  18. {
  19. type: "delicious",
  20. slices: 8
  21. }
  22. ```
  23. It is recommended that you use the camelCased loader name as your default config property name.
  24. ### `parseQuery`
  25. ``` javascript
  26. var query = loaderUtils.parseQuery(this.query);
  27. assert(typeof query == "object");
  28. if(query.flag)
  29. // ...
  30. ```
  31. ``` text
  32. null -> {}
  33. ? -> {}
  34. ?flag -> { flag: true }
  35. ?+flag -> { flag: true }
  36. ?-flag -> { flag: false }
  37. ?xyz=test -> { xyz: "test" }
  38. ?xyz[]=a -> { xyz: ["a"] }
  39. ?flag1&flag2 -> { flag1: true, flag2: true }
  40. ?+flag1,-flag2 -> { flag1: true, flag2: false }
  41. ?xyz[]=a,xyz[]=b -> { xyz: ["a", "b"] }
  42. ?a%2C%26b=c%2C%26d -> { "a,&b": "c,&d" }
  43. ?{json:5,data:{a:1}} -> { json: 5, data: { a: 1 } }
  44. ```
  45. ### `stringifyRequest`
  46. Turns a request into a string that can be used inside `require()` or `import` while avoiding absolute paths.
  47. Use it instead of `JSON.stringify(...)` if you're generating code inside a loader.
  48. **Why is this necessary?** Since webpack calculates the hash before module paths are translated into module ids, we must avoid absolute paths to ensure
  49. consistent hashes across different compilations.
  50. This function:
  51. - resolves absolute requests into relative requests if the request and the module are on the same hard drive
  52. - replaces `\` with `/` if the request and the module are on the same hard drive
  53. - won't change the path at all if the request and the module are on different hard drives
  54. - applies `JSON.stringify` to the result
  55. ```javascript
  56. loaderUtils.stringifyRequest(this, "./test.js");
  57. // "\"./test.js\""
  58. loaderUtils.stringifyRequest(this, ".\\test.js");
  59. // "\"./test.js\""
  60. loaderUtils.stringifyRequest(this, "test");
  61. // "\"test\""
  62. loaderUtils.stringifyRequest(this, "test/lib/index.js");
  63. // "\"test/lib/index.js\""
  64. loaderUtils.stringifyRequest(this, "otherLoader?andConfig!test?someConfig");
  65. // "\"otherLoader?andConfig!test?someConfig\""
  66. loaderUtils.stringifyRequest(this, require.resolve("test"));
  67. // "\"../node_modules/some-loader/lib/test.js\""
  68. loaderUtils.stringifyRequest(this, "C:\\module\\test.js");
  69. // "\"../../test.js\"" (on Windows, in case the module and the request are on the same drive)
  70. loaderUtils.stringifyRequest(this, "C:\\module\\test.js");
  71. // "\"C:\\module\\test.js\"" (on Windows, in case the module and the request are on different drives)
  72. loaderUtils.stringifyRequest(this, "\\\\network-drive\\test.js");
  73. // "\"\\\\network-drive\\\\test.js\"" (on Windows, in case the module and the request are on different drives)
  74. ```
  75. ### `urlToRequest`
  76. Converts some resource URL to a webpack module request.
  77. ```javascript
  78. var url = "path/to/module.js";
  79. var request = loaderUtils.urlToRequest(url); // "./path/to/module.js"
  80. ```
  81. #### Module URLs
  82. Any URL containing a `~` will be interpreted as a module request. Anything after the `~` will be considered the request path.
  83. ```javascript
  84. var url = "~path/to/module.js";
  85. var request = loaderUtils.urlToRequest(url); // "path/to/module.js"
  86. ```
  87. #### Root-relative URLs
  88. URLs that are root-relative (start with `/`) can be resolved relative to some arbitrary path by using the `root` parameter:
  89. ```javascript
  90. var url = "/path/to/module.js";
  91. var root = "./root";
  92. var request = loaderUtils.urlToRequest(url, root); // "./root/path/to/module.js"
  93. ```
  94. To convert a root-relative URL into a module URL, specify a `root` value that starts with `~`:
  95. ```javascript
  96. var url = "/path/to/module.js";
  97. var root = "~";
  98. var request = loaderUtils.urlToRequest(url, root); // "path/to/module.js"
  99. ```
  100. ### `interpolateName`
  101. Interpolates a filename template using multiple placeholders and/or a regular expression.
  102. The template and regular expression are set as query params called `name` and `regExp` on the current loader's context.
  103. ```javascript
  104. var interpolatedName = loaderUtils.interpolateName(loaderContext, name, options);
  105. ```
  106. The following tokens are replaced in the `name` parameter:
  107. * `[ext]` the extension of the resource
  108. * `[name]` the basename of the resource
  109. * `[path]` the path of the resource relative to the `context` query parameter or option.
  110. * `[folder]` the folder of the resource is in.
  111. * `[emoji]` a random emoji representation of `options.content`
  112. * `[emoji:<length>]` same as above, but with a customizable number of emojis
  113. * `[hash]` the hash of `options.content` (Buffer) (by default it's the hex digest of the md5 hash)
  114. * `[<hashType>:hash:<digestType>:<length>]` optionally one can configure
  115. * other `hashType`s, i. e. `sha1`, `md5`, `sha256`, `sha512`
  116. * other `digestType`s, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
  117. * and `length` the length in chars
  118. * `[N]` the N-th match obtained from matching the current file name against `options.regExp`
  119. Examples
  120. ``` javascript
  121. // loaderContext.resourcePath = "/app/js/javascript.js"
  122. loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext]", { content: ... });
  123. // => js/9473fdd0d880a43c21b7778d34872157.script.js
  124. // loaderContext.resourcePath = "/app/page.html"
  125. loaderUtils.interpolateName(loaderContext, "html-[hash:6].html", { content: ... });
  126. // => html-9473fd.html
  127. // loaderContext.resourcePath = "/app/flash.txt"
  128. loaderUtils.interpolateName(loaderContext, "[hash]", { content: ... });
  129. // => c31e9820c001c9c4a86bce33ce43b679
  130. // loaderContext.resourcePath = "/app/img/image.gif"
  131. loaderUtils.interpolateName(loaderContext, "[emoji]", { content: ... });
  132. // => 👍
  133. // loaderContext.resourcePath = "/app/img/image.gif"
  134. loaderUtils.interpolateName(loaderContext, "[emoji:4]", { content: ... });
  135. // => 🙍🏢📤🐝
  136. // loaderContext.resourcePath = "/app/img/image.png"
  137. loaderUtils.interpolateName(loaderContext, "[sha512:hash:base64:7].[ext]", { content: ... });
  138. // => 2BKDTjl.png
  139. // use sha512 hash instead of md5 and with only 7 chars of base64
  140. // loaderContext.resourcePath = "/app/img/myself.png"
  141. // loaderContext.query.name =
  142. loaderUtils.interpolateName(loaderContext, "picture.png");
  143. // => picture.png
  144. // loaderContext.resourcePath = "/app/dir/file.png"
  145. loaderUtils.interpolateName(loaderContext, "[path][name].[ext]?[hash]", { content: ... });
  146. // => /app/dir/file.png?9473fdd0d880a43c21b7778d34872157
  147. // loaderContext.resourcePath = "/app/js/page-home.js"
  148. loaderUtils.interpolateName(loaderContext, "script-[1].[ext]", { regExp: "page-(.*)\\.js", content: ... });
  149. // => script-home.js
  150. ```
  151. ### `getHashDigest`
  152. ``` javascript
  153. var digestString = loaderUtils.getHashDigest(buffer, hashType, digestType, maxLength);
  154. ```
  155. * `buffer` the content that should be hashed
  156. * `hashType` one of `sha1`, `md5`, `sha256`, `sha512` or any other node.js supported hash type
  157. * `digestType` one of `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
  158. * `maxLength` the maximum length in chars
  159. ## License
  160. MIT (http://www.opensource.org/licenses/mit-license.php)