https://github.com/andrejbaran/webpack-run-loader
A webpack loader that executes function exported by previous loader and exports or returns its result or the original function bound to context and arguments.
https://github.com/andrejbaran/webpack-run-loader
webpack webpack-loader webpack2 webpack3
Last synced: 3 months ago
JSON representation
A webpack loader that executes function exported by previous loader and exports or returns its result or the original function bound to context and arguments.
- Host: GitHub
- URL: https://github.com/andrejbaran/webpack-run-loader
- Owner: andrejbaran
- License: mit
- Created: 2017-10-18T15:13:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-06-02T00:37:57.000Z (about 6 years ago)
- Last Synced: 2025-11-17T22:03:50.179Z (8 months ago)
- Topics: webpack, webpack-loader, webpack2, webpack3
- Language: TypeScript
- Homepage:
- Size: 718 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://circleci.com/gh/andrejbaran/webpack-run-loader)
[](https://codecov.io/gh/andrejbaran/webpack-run-loader)
[](https://www.codacy.com/app/andrej.baran/webpack-run-loader?utm_source=github.com&utm_medium=referral&utm_content=andrejbaran/webpack-run-loader&utm_campaign=Badge_Grade)
[](https://www.npmjs.com/package/webpack-run-loader)
[](https://github.com/andrejbaran/webpack-run-loader/issues)
[](https://github.com/andrejbaran/webpack-run-loader/issues?q=is%3Aissue+is%3Aclosed)
[](https://github.com/andrejbaran/webpack-run-loader/pulls)
[](https://github.com/andrejbaran/webpack-run-loader/pulls?q=is%3Apr+is%3Aclosed)
## Info
A webpack loader that executes function exported by previous loader and exports or returns its result
or the original function bound to context and arguments.
It is a mix of [apply-loader](https://github.com/mogelbrod/apply-loader) and [extract-loader](https://github.com/peerigon/extract-loader). See [Options](#options) for more details.
### Reasoning / Alternatives
You probably can get away with using `apply-loader` with `extract-loader`.
The reason why this loader was made is a specific scenario where a loader exports a function but
also uses imports inside the script (e.g. `pug-loader`). This doesn't play nice with `extract-laoder`
because of the way it replaces imports (as it wasn't meant for this scenario I guess).
## Install
```shell
npm i webpack-run-loader
yarn add webpack-run-loader
```
## Usage
For demonstration purposes let's say a loader uses this script to export a function:
```js
const runtime = require("some-runtime");
module.exports = function(optionalArg) {
doSomeStuff();
const context = this.createContext(optionalArg);
return runtime.yay(context);
}
```
### Options
You can specify loader options the regular way in your webpack config:
```js
{
...
module: {
...
{
loader: "webpack-run-loader",
options: {
...
}
}
}
...
}
```
* [mode: ("run" | "bind")](#mode-run--bind)
* [export: boolean](#export-boolean)
* [stringify: boolean](#stringify-boolean)
* [context: (loaderContext) => any](#context-loadercontext--any)
* [args: array](#args-array)
### mode: ("run" | "bind")
Specifies the mode of the loader:
* `run`: Actually runs the exported function and returns/exports its result
* `bind`: Binds the exported function to optional [context](#context-loadercontext--any)
and [args](#args-array) and exports (forces [export](#export-boolean) to `true`) the bound function
Default is `run`.
### export: boolean
Specifies whether the loader exports or returns the result of exported function.
Default is `false`.
* `true` makes `webpack-run-loader` behave the same way as `apply-loader`.
Note that `args` option isn't fully compatible
* `false` makes `webpack-run-loader`behave the same way as `extract-loader` with the exception,
that it extracts the result of the function call instead of the source of the module.
Usually you want to set export to `true` if you need to further process the result in other loaders
and you want to set it to `false` if you want to extract the result into a file (e.g. with [file-loader](https://github.com/webpack-contrib/file-loader))
#### Example (true)
```js
{
loader: "webpack-run-loader",
options: {
context: (ctx) => {
return {
createContext(optionalArg) {
....
}
};
},
export: true
}
}
// webpack-run-laoder will act as a "pitching" laoder
// and returns a script like the one below, same as apply-loader:
...
var req = require(/* remaining reuest in the loader chain */);
module.exports = (req["default"] || req).apply(/* context */, /* array of args */);
```
#### Example (false)
```js
{
loader: "webpack-run-loader",
options: {
context: (ctx) => {
return {
createContext(optionalArg) {
....
}
};
},
export: false // default
}
}
// webpack-run-laoder will return the raw result of the exported function.
```
Read more about [loaders](https://webpack.js.org/concepts/loaders/) and [pitching loaders](https://webpack.js.org/api/loaders/#pitching-loader).
### stringify: boolean
Specifies whether the exported function's result will be ran through `JSON.stringify` or not.
Default is `false`.
### context: (loaderContext) => any
Function that returns context that will be exposed as `this` while running the exported function.
This might be useful when you want to return the result of the function (`export false`) and you know the exported function is using `this` and you need to provide it.
#### Signature
`(loaderContext) => any` where `loaderContext` is webpack's loader [context](https://webpack.js.org/api/loaders/#the-loader-context)
#### Example
```js
{
loader: "webpack-run-loader",
options: {
context: (ctx) => {
return {
// we need to provide createContext in order for the script to work
createContext(optionalArg) {
....
}
};
}
}
}
```
### args: Array
Array of arguments passed to exported function when executing it.
#### Example
```js
{
loader: "webpack-run-loader",
options: {
context: (ctx) => {
return {
createContext(optionalArg) {
// optionalArg will be ourOptionalArg
....
}
};
},
args: [ourOptionalArg]
}
}
```
## Contributing
All PRs are welcome! Note that [conventional changlog/standard version](https://github.com/conventional-changelog/standard-version) is used for versioning and commit messages.
## Roadmap
* More thorough tests
* Support for scripts using ES import/export declarations