diff options
author | Florian Dold <florian.dold@gmail.com> | 2017-05-03 15:35:00 +0200 |
---|---|---|
committer | Florian Dold <florian.dold@gmail.com> | 2017-05-03 15:35:00 +0200 |
commit | de98e0b232509d5f40c135d540a70e415272ff85 (patch) | |
tree | a79222a5b58484ab3b80d18efcaaa7ccc4769b33 /node_modules/loader-utils/README.md | |
parent | e0c9d480a73fa629c1e4a47d3e721f1d2d345406 (diff) |
node_modules
Diffstat (limited to 'node_modules/loader-utils/README.md')
-rw-r--r-- | node_modules/loader-utils/README.md | 217 |
1 files changed, 217 insertions, 0 deletions
diff --git a/node_modules/loader-utils/README.md b/node_modules/loader-utils/README.md new file mode 100644 index 000000000..305fa9029 --- /dev/null +++ b/node_modules/loader-utils/README.md @@ -0,0 +1,217 @@ +# loader-utils + +## Methods + +### `getLoaderConfig` + +Recommended way to retrieve the loader config: + +```javascript +// inside your loader +config = loaderUtils.getLoaderConfig(this, "myLoader"); +``` + +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... + +```javascript +cheesecakeLoader: { + type: "delicious", + slices: 4 +} +``` + +...and your loader was called with `?slices=8`, `getLoaderConfig(this, "cheesecakeLoader")` would return + +```javascript +{ + type: "delicious", + slices: 8 +} +``` + +It is recommended that you use the camelCased loader name as your default config property name. + +### `parseQuery` + +``` javascript +var query = loaderUtils.parseQuery(this.query); +assert(typeof query == "object"); +if(query.flag) + // ... +``` + +``` text +null -> {} +? -> {} +?flag -> { flag: true } +?+flag -> { flag: true } +?-flag -> { flag: false } +?xyz=test -> { xyz: "test" } +?xyz[]=a -> { xyz: ["a"] } +?flag1&flag2 -> { flag1: true, flag2: true } +?+flag1,-flag2 -> { flag1: true, flag2: false } +?xyz[]=a,xyz[]=b -> { xyz: ["a", "b"] } +?a%2C%26b=c%2C%26d -> { "a,&b": "c,&d" } +?{json:5,data:{a:1}} -> { json: 5, data: { a: 1 } } +``` + +### `stringifyRequest` + +Turns a request into a string that can be used inside `require()` or `import` while avoiding absolute paths. +Use it instead of `JSON.stringify(...)` if you're generating code inside a loader. + +**Why is this necessary?** Since webpack calculates the hash before module paths are translated into module ids, we must avoid absolute paths to ensure +consistent hashes across different compilations. + +This function: + +- resolves absolute requests into relative requests if the request and the module are on the same hard drive +- replaces `\` with `/` if the request and the module are on the same hard drive +- won't change the path at all if the request and the module are on different hard drives +- applies `JSON.stringify` to the result + +```javascript +loaderUtils.stringifyRequest(this, "./test.js"); +// "\"./test.js\"" + +loaderUtils.stringifyRequest(this, ".\\test.js"); +// "\"./test.js\"" + +loaderUtils.stringifyRequest(this, "test"); +// "\"test\"" + +loaderUtils.stringifyRequest(this, "test/lib/index.js"); +// "\"test/lib/index.js\"" + +loaderUtils.stringifyRequest(this, "otherLoader?andConfig!test?someConfig"); +// "\"otherLoader?andConfig!test?someConfig\"" + +loaderUtils.stringifyRequest(this, require.resolve("test")); +// "\"../node_modules/some-loader/lib/test.js\"" + +loaderUtils.stringifyRequest(this, "C:\\module\\test.js"); +// "\"../../test.js\"" (on Windows, in case the module and the request are on the same drive) + +loaderUtils.stringifyRequest(this, "C:\\module\\test.js"); +// "\"C:\\module\\test.js\"" (on Windows, in case the module and the request are on different drives) + +loaderUtils.stringifyRequest(this, "\\\\network-drive\\test.js"); +// "\"\\\\network-drive\\\\test.js\"" (on Windows, in case the module and the request are on different drives) +``` + +### `urlToRequest` + +Converts some resource URL to a webpack module request. + +```javascript +var url = "path/to/module.js"; +var request = loaderUtils.urlToRequest(url); // "./path/to/module.js" +``` + +#### Module URLs + +Any URL containing a `~` will be interpreted as a module request. Anything after the `~` will be considered the request path. + +```javascript +var url = "~path/to/module.js"; +var request = loaderUtils.urlToRequest(url); // "path/to/module.js" +``` + +#### Root-relative URLs + +URLs that are root-relative (start with `/`) can be resolved relative to some arbitrary path by using the `root` parameter: + +```javascript +var url = "/path/to/module.js"; +var root = "./root"; +var request = loaderUtils.urlToRequest(url, root); // "./root/path/to/module.js" +``` + +To convert a root-relative URL into a module URL, specify a `root` value that starts with `~`: + +```javascript +var url = "/path/to/module.js"; +var root = "~"; +var request = loaderUtils.urlToRequest(url, root); // "path/to/module.js" +``` + +### `interpolateName` + +Interpolates a filename template using multiple placeholders and/or a regular expression. +The template and regular expression are set as query params called `name` and `regExp` on the current loader's context. + +```javascript +var interpolatedName = loaderUtils.interpolateName(loaderContext, name, options); +``` + +The following tokens are replaced in the `name` parameter: + +* `[ext]` the extension of the resource +* `[name]` the basename of the resource +* `[path]` the path of the resource relative to the `context` query parameter or option. +* `[folder]` the folder of the resource is in. +* `[emoji]` a random emoji representation of `options.content` +* `[emoji:<length>]` same as above, but with a customizable number of emojis +* `[hash]` the hash of `options.content` (Buffer) (by default it's the hex digest of the md5 hash) +* `[<hashType>:hash:<digestType>:<length>]` optionally one can configure + * other `hashType`s, i. e. `sha1`, `md5`, `sha256`, `sha512` + * other `digestType`s, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64` + * and `length` the length in chars +* `[N]` the N-th match obtained from matching the current file name against `options.regExp` + +Examples + +``` javascript +// loaderContext.resourcePath = "/app/js/javascript.js" +loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext]", { content: ... }); +// => js/9473fdd0d880a43c21b7778d34872157.script.js + +// loaderContext.resourcePath = "/app/page.html" +loaderUtils.interpolateName(loaderContext, "html-[hash:6].html", { content: ... }); +// => html-9473fd.html + +// loaderContext.resourcePath = "/app/flash.txt" +loaderUtils.interpolateName(loaderContext, "[hash]", { content: ... }); +// => c31e9820c001c9c4a86bce33ce43b679 + +// loaderContext.resourcePath = "/app/img/image.gif" +loaderUtils.interpolateName(loaderContext, "[emoji]", { content: ... }); +// => 👍 + +// loaderContext.resourcePath = "/app/img/image.gif" +loaderUtils.interpolateName(loaderContext, "[emoji:4]", { content: ... }); +// => 🙍🏢📤🐝 + +// loaderContext.resourcePath = "/app/img/image.png" +loaderUtils.interpolateName(loaderContext, "[sha512:hash:base64:7].[ext]", { content: ... }); +// => 2BKDTjl.png +// use sha512 hash instead of md5 and with only 7 chars of base64 + +// loaderContext.resourcePath = "/app/img/myself.png" +// loaderContext.query.name = +loaderUtils.interpolateName(loaderContext, "picture.png"); +// => picture.png + +// loaderContext.resourcePath = "/app/dir/file.png" +loaderUtils.interpolateName(loaderContext, "[path][name].[ext]?[hash]", { content: ... }); +// => /app/dir/file.png?9473fdd0d880a43c21b7778d34872157 + +// loaderContext.resourcePath = "/app/js/page-home.js" +loaderUtils.interpolateName(loaderContext, "script-[1].[ext]", { regExp: "page-(.*)\\.js", content: ... }); +// => script-home.js +``` + +### `getHashDigest` + +``` javascript +var digestString = loaderUtils.getHashDigest(buffer, hashType, digestType, maxLength); +``` + +* `buffer` the content that should be hashed +* `hashType` one of `sha1`, `md5`, `sha256`, `sha512` or any other node.js supported hash type +* `digestType` one of `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64` +* `maxLength` the maximum length in chars + +## License + +MIT (http://www.opensource.org/licenses/mit-license.php) |