Skip to content

Commit bdde876

Browse files
asulaimanskipjack
authored andcommitted
docs(dev): update how-to-write-a-loader (#1529)
Add loader chaining and `resolveLoader` examples.
1 parent 983b5a6 commit bdde876

File tree

1 file changed

+32
-0
lines changed

1 file changed

+32
-0
lines changed

src/content/development/how-to-write-a-loader.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
22
title: How to write a loader?
33
sort: 3
4+
contributors:
5+
- asulaiman
46
---
57

68
A loader is a node module exporting a `function`.
@@ -17,6 +19,36 @@ The loader is expected to give back one or two values. The first value is a resu
1719

1820
In the complex case, when multiple loaders are chained, only the last loader gets the resource file and only the first loader is expected to give back one or two values (JavaScript and SourceMap). Values that any other loader give back are passed to the previous loader.
1921

22+
In other words, chained loaders are executed in reverse order -- either right to left or bottom to top depending on the format of your array. Lets say you have two loaders that go by the name of `foo-loader` and `bar-loader`. You would like to execute `foo-loader` and then pass the result of the transformation from `foo-loader` finally to `bar-loader`.
23+
24+
You would add the following in your config file (assuming that both loaders are already defined):
25+
26+
``` javascript
27+
module: {
28+
rules: [
29+
{
30+
test: /\.js/,
31+
use: [
32+
'bar-loader',
33+
'foo-loader'
34+
]
35+
}
36+
]
37+
}
38+
```
39+
40+
Note that webpack currently only searches in your node modules folder for loaders. If these loaders are defined outside your node modules folder you would need to use the `resolveLoader` property to get webpack to include your loaders. For example lets say you have your custom loaders included in a folder called `loaders`. You would have to add the following to your config file:
41+
42+
``` javascript
43+
resolveLoader: {
44+
modules: [
45+
'node_modules',
46+
path_resolve(__dirname, 'loaders')
47+
]
48+
}
49+
```
50+
51+
2052
## Examples
2153

2254
``` javascript

0 commit comments

Comments
 (0)