From 5a2f81eb2549db194ba9d2dab39ea190bdb74974 Mon Sep 17 00:00:00 2001 From: asulaiman Date: Thu, 17 Aug 2017 15:26:10 -0400 Subject: [PATCH 1/7] Added loader chaining and resolveLoader examples. --- content/development/how-to-write-a-loader.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/content/development/how-to-write-a-loader.md b/content/development/how-to-write-a-loader.md index 570d44a4aa65..f7fbaeaf288f 100644 --- a/content/development/how-to-write-a-loader.md +++ b/content/development/how-to-write-a-loader.md @@ -17,6 +17,25 @@ 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 the loading order for chained loaders goes from right to left or bottom to top. +For example: lets say you have two loaders that go by the name of `fooLoader` and `barLoader`. You would like to execute `fooLoader` and then pass the result of the transformation from `fooLoader` finally to `barLoader`. + +You would add the following in your config file (assuming that both loaders are already defined): +``` javascript +module: { + rules: [{ + test: /\.js/, + use: [{ loader: 'barLoader' }, { loader: 'fooLoader' } + ] + } +``` +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 From f061644828449bd82316f41db617c0f62bf0d9c9 Mon Sep 17 00:00:00 2001 From: asulaiman Date: Thu, 17 Aug 2017 15:31:06 -0400 Subject: [PATCH 2/7] added recognition line --- content/development/how-to-write-a-loader.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/development/how-to-write-a-loader.md b/content/development/how-to-write-a-loader.md index f7fbaeaf288f..ad9261d92c7f 100644 --- a/content/development/how-to-write-a-loader.md +++ b/content/development/how-to-write-a-loader.md @@ -1,5 +1,7 @@ --- title: How to write a loader? +contributors: + - asulaiman sort: 3 --- From 6ae3177f420d8464c7ba6b6b41364ff59269377a Mon Sep 17 00:00:00 2001 From: asulaiman Date: Thu, 17 Aug 2017 16:53:21 -0400 Subject: [PATCH 3/7] fixing lint errors. --- content/development/how-to-write-a-loader.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/content/development/how-to-write-a-loader.md b/content/development/how-to-write-a-loader.md index ad9261d92c7f..8913891dd10b 100644 --- a/content/development/how-to-write-a-loader.md +++ b/content/development/how-to-write-a-loader.md @@ -22,7 +22,8 @@ In the complex case, when multiple loaders are chained, only the last loader get In other words the loading order for chained loaders goes from right to left or bottom to top. For example: lets say you have two loaders that go by the name of `fooLoader` and `barLoader`. You would like to execute `fooLoader` and then pass the result of the transformation from `fooLoader` finally to `barLoader`. -You would add the following in your config file (assuming that both loaders are already defined): +You would add the following in your config file (assuming that both loaders are already defined): + ``` javascript module: { rules: [{ @@ -31,7 +32,9 @@ module: { ] } ``` + 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'] From 46f86a9a17764bdf1a2f933dfd23cd4b52c40f95 Mon Sep 17 00:00:00 2001 From: asulaiman Date: Fri, 18 Aug 2017 11:23:16 -0400 Subject: [PATCH 4/7] Added missing bracket --- content/development/how-to-write-a-loader.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/development/how-to-write-a-loader.md b/content/development/how-to-write-a-loader.md index 8913891dd10b..ac1fc7d75b36 100644 --- a/content/development/how-to-write-a-loader.md +++ b/content/development/how-to-write-a-loader.md @@ -28,7 +28,7 @@ You would add the following in your config file (assuming that both loaders are module: { rules: [{ test: /\.js/, - use: [{ loader: 'barLoader' }, { loader: 'fooLoader' } + use: [{ loader: 'barLoader' }, { loader: 'fooLoader' }] ] } ``` From fb94fb6dfe37957ff3c8e43d634c9d86e3eb4d7e Mon Sep 17 00:00:00 2001 From: asulaiman Date: Fri, 18 Aug 2017 11:54:13 -0400 Subject: [PATCH 5/7] fixed bracker usage for path.resolve --- content/development/how-to-write-a-loader.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/development/how-to-write-a-loader.md b/content/development/how-to-write-a-loader.md index ac1fc7d75b36..c6fedf4692e5 100644 --- a/content/development/how-to-write-a-loader.md +++ b/content/development/how-to-write-a-loader.md @@ -37,7 +37,7 @@ Note that webpack currently only searches in your node modules folder for loader ``` javascript resolveLoader: { -modules: ['node_modules', path_resolve[__dirname, 'loaders'] +modules: ['node_modules', path_resolve(__dirname, 'loaders') } ``` From df431b8be3e4f494bf71257f763962ea781e47c0 Mon Sep 17 00:00:00 2001 From: asulaiman Date: Mon, 21 Aug 2017 10:02:51 -0400 Subject: [PATCH 6/7] Adjusted based on comments. --- content/development/how-to-write-a-loader.md | 23 ++++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/content/development/how-to-write-a-loader.md b/content/development/how-to-write-a-loader.md index c6fedf4692e5..d010a56818fa 100644 --- a/content/development/how-to-write-a-loader.md +++ b/content/development/how-to-write-a-loader.md @@ -1,8 +1,8 @@ --- title: How to write a loader? +sort: 3 contributors: - asulaiman -sort: 3 --- A loader is a node module exporting a `function`. @@ -19,28 +19,33 @@ 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 the loading order for chained loaders goes from right to left or bottom to top. -For example: lets say you have two loaders that go by the name of `fooLoader` and `barLoader`. You would like to execute `fooLoader` and then pass the result of the transformation from `fooLoader` finally to `barLoader`. +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: [{ loader: 'barLoader' }, { loader: 'fooLoader' }] - ] - } + 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') + modules: ['node_modules', path_resolve(__dirname, 'loaders') } ``` + ## Examples ``` javascript From 8a92bab7ecb73d26ccd11588368772f3a42e0b5c Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 22 Aug 2017 08:41:12 -0400 Subject: [PATCH 7/7] docs(development): update how-to-write-a-loader Add trailing bracket and update formatting in `resolveLoader` example. --- content/development/how-to-write-a-loader.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/content/development/how-to-write-a-loader.md b/content/development/how-to-write-a-loader.md index d010a56818fa..a0022a3139e9 100644 --- a/content/development/how-to-write-a-loader.md +++ b/content/development/how-to-write-a-loader.md @@ -41,7 +41,10 @@ Note that webpack currently only searches in your node modules folder for loader ``` javascript resolveLoader: { - modules: ['node_modules', path_resolve(__dirname, 'loaders') + modules: [ + 'node_modules', + path_resolve(__dirname, 'loaders') + ] } ```