Skip to content

Added loader chaining and resolveLoader examples. #1529

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Aug 23, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions src/content/development/how-to-write-a-loader.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: How to write a loader?
sort: 3
contributors:
- asulaiman
---

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

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.

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`.

You would add the following in your config file (assuming that both loaders are already defined):

``` javascript
module: {
rules: [
{
test: /\.js/,
use: [
'bar-loader',
'foo-loader'
]
}
]
}
```

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:

``` javascript
resolveLoader: {
modules: [
'node_modules',
path_resolve(__dirname, 'loaders')
]
}
```


## Examples

``` javascript
Expand Down