Skip to content

Commit d06d031

Browse files
bebrawbebraw
authored
Merge pull request #804 from simon04/loader-list
/loaders: add index of important loaders
2 parents 15741be + 403d163 commit d06d031

File tree

2 files changed

+113
-69
lines changed

2 files changed

+113
-69
lines changed

‎content/concepts/loaders.md

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ contributors:
66
- ev1stensberg
77
- SpaceK33z
88
- gangachris
9+
- TheLarkInn
910
- simon04
1011
---
1112

@@ -20,7 +21,7 @@ npm install --save-dev css-loader
2021
npm install --save-dev ts-loader
2122
```
2223

23-
Secondly, configure in your `webpack.config.js` that for every `.css` file the `css-loader` should be used and analogously for `.ts` files and the `ts-loader`:
24+
Secondly, configure in your `webpack.config.js` that for every `.css` file the [`css-loader`](/loaders/css-loader) should be used and analogously for `.ts` files and the `ts-loader`:
2425

2526
**webpack.config.js**
2627

@@ -48,6 +49,63 @@ Note that according to the [configuration options](/configuration#options), the
4849
}}
4950
```
5051

52+
## Configuration
53+
54+
There are three ways to use loaders in your application:
55+
56+
* via configuration
57+
* explicit in the `require` statement
58+
* via CLI
59+
60+
### Via `webpack.config.js`
61+
62+
[`module.rules`](https://webpack.js.org/configuration/module/#module-rules) allows you to specify several loaders within your webpack configuration.
63+
This is a concise way to display loaders, and helps to have clean code as
64+
well as you have a full overview of each respective loader.
65+
66+
```js
67+
module: {
68+
rules: [
69+
{
70+
test: /\.css$/,
71+
use: [
72+
{ loader: 'style-loader'},
73+
{
74+
loader: 'css-loader',
75+
options: {
76+
modules: true
77+
}
78+
}
79+
]
80+
}
81+
]
82+
}
83+
```
84+
85+
### Via `require`
86+
87+
It's possible to specify the loaders in the `require` statement (or `define`, `require.ensure`, etc.). Separate loaders from the resource with `!`. Each part is resolved relative to the current directory.
88+
89+
```js
90+
require('style-loader!css-loader?modules!./styles.css');
91+
```
92+
93+
It's possible to overwrite any loaders in the configuration by prefixing the entire rule with `!`.
94+
95+
Options can be passed with a query parameter, just like on the web (`?key=value&foo=bar`). It's also possible to use a JSON object (`?{"key":"value","foo":"bar"}`).
96+
97+
T> Use `module.rules` whenever possible, as this will reduce boilerplate in your source code and allows you to debug or locate a loader faster if something goes south.
98+
99+
### Via CLI
100+
101+
Optionally, you could also use loaders through the CLI:
102+
103+
```sh
104+
webpack --module-bind jade --module-bind 'css=style!css'
105+
```
106+
107+
This uses the `jade-loader` for `.jade` files, and the [`style-loader`](/loaders/style-loader) and [`css-loader`](/loaders/css-loader) for `.css` files.
108+
51109
## Loader Features
52110

53111
* Loaders can be chained. They are applied in a pipeline to the resource. A chain of loaders are compiled chronologically. The first loader in a chain of loaders returns a value to the next. At the end loader, webpack expects JavaScript to be returned.

‎content/loaders/index.md

Lines changed: 54 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,73 +2,59 @@
22
title: Loaders
33
sort: 1
44
contributors:
5-
- ev1stensberg
6-
- TheLarkInn
7-
- manekinekko
8-
- SpaceK33z
5+
- simon04
96
---
107

11-
As explained in detail on the [concepts page](/concepts/loaders), loaders are transformations that are applied on a resource file of your application. Loaders allow you to, for example, configure how webpack should handle a CSS file.
12-
13-
?> Move the general usage documentation to the [concepts page](/concepts/loaders) and focus here on describing the available loaders (similar to [plugins](/plugins)).
14-
15-
A loader is typically a npm package, which you can install as a development dependency:
16-
17-
```sh
18-
npm install css-loader --save-dev
19-
```
20-
21-
There are three ways to use loaders in your application:
22-
23-
* via configuration
24-
* explicit in the `require` statement
25-
* via CLI
26-
27-
## Via Configuration
28-
29-
[`module.rules`](https://webpack.js.org/configuration/module/#module-rules) allows you to specify several loaders within your webpack configuration.
30-
This is a concise way to display loaders, and helps to have clean code as
31-
well as you have a full overview of each respective loader.
32-
33-
```js
34-
module: {
35-
rules: [
36-
{
37-
test: /\.css$/,
38-
use: [
39-
{ loader: 'style-loader'},
40-
{
41-
loader: 'css-loader',
42-
options: {
43-
modules: true
44-
}
45-
}
46-
]
47-
}
48-
]
49-
}
50-
```
51-
52-
## Via `require`
53-
54-
It's possible to specify the loaders in the `require` statement (or `define`, `require.ensure`, etc.). Separate loaders from the resource with `!`. Each part is resolved relative to the current directory.
55-
56-
```js
57-
require('style-loader!css-loader?modules!./styles.css');
58-
```
59-
60-
It's possible to overwrite any loaders in the configuration by prefixing the entire rule with `!`.
61-
62-
Options can be passed with a query parameter, just like on the web (`?key=value&foo=bar`). It's also possible to use a JSON object (`?{"key":"value","foo":"bar"}`).
63-
64-
T> Use `module.rules` whenever possible, as this will reduce boilerplate in your source code and allows you to debug or locate a loader faster if something goes south.
65-
66-
## Via CLI
67-
68-
Optionally, you could also use loaders through the CLI:
69-
70-
```sh
71-
webpack --module-bind jade --module-bind 'css=style!css'
72-
```
73-
74-
This uses the loader “jade” for “.jade” files and the loaders “style” and “css” for “.css” files.
8+
webpack enables use of [loaders](/concepts/loaders) to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.
9+
10+
Loaders are activated by using `loadername!` prefixes in `require()` statements, or are automatically applied via regex from your webpack configuration – see [configuration](/concepts/loaders#configuration).
11+
12+
## Files
13+
* [`raw-loader`](/loaders/raw-loader) Loads raw content of a file (utf-8)
14+
* [`val-loader`](/loaders/val-loader) Executes code as module and consider exports as JS code
15+
* [`url-loader`](/loaders/url-loader) Works like the file loader, but can return a [data URL](https://tools.ietf.org/html/rfc2397) if the file is smaller than a limit
16+
* [`file-loader`](/loaders/file-loader) Emits the file into the output folder and returns the (relative) URL
17+
18+
## JSON
19+
* [`json-loader`](/loaders/json-loader) Loads a [JSON](http://json.org/) file (included by default)
20+
* [`json5-loader`](/loaders/json5-loader) Loads and transpiles a [JSON 5](http://json5.org/) file
21+
* `cson-loader` Loads and transpiles a [CSON](https://github.com/bevry/cson#what-is-cson) file
22+
23+
## Transpiling
24+
* [`script-loader`](/loaders/script-loader) Executes a JavaScript file once in global context (like in script tag), requires are not parsed
25+
* [`babel-loader`](/loaders/babel-loader) Loads ES2015+ code and transpiles to ES5 using [Babel](https://babeljs.io/)
26+
* `traceur-loader` Loads ES2015+ code and transpiles to ES5 using [Traceur](https://github.com/google/traceur-compiler#readme)
27+
* `typescript-loader` Loads [TypeScript](https://www.typescriptlang.org/) like JavaScript
28+
* [`coffee-loader`](/loaders/coffee-loader) Loads [CoffeeScript](http://coffeescript.org/) like JavaScript
29+
30+
## Templating
31+
* [`html-loader`](/loaders/html-loader) Exports HTML as string, require references to static resources
32+
* `pug-loader` Loads Pug templates and returns a function
33+
* `jade-loader` Loads Jade templates and returns a function
34+
* `markdown-loader` Compiles Markdown to HTML
35+
* `posthtml-loader` Loads and transforms a HTML file using [PostHTML](https://github.com/posthtml/posthtml)
36+
* `handlebars-loader` Compiles Handlebars to HTML
37+
38+
## Styling
39+
* [`style-loader`](/loaders/style-loader) Add exports of a module as style to DOM
40+
* [`css-loader`](/loaders/css-loader) Loads CSS file with resolved imports and returns CSS code
41+
* [`less-loader`](/loaders/less-loader) Loads and compiles a LESS file
42+
* `sass-loader` Loads and compiles a SASS/SCSS file
43+
* `stylus-loader` Loads and compiles a Stylus file
44+
* `postcss-loader` Loads and transforms a CSS/SSS file using [PostCSS](http://postcss.org)
45+
46+
## Linting && Testing
47+
* [`mocha-loader`](/loaders/mocha-loader) Tests with [mocha](https://mochajs.org/) (Browser/NodeJS)
48+
* `eslint-loader` PreLoader for linting code using [ESLint](http://eslint.org/)
49+
* [`jshint-loader`](/loaders/jshint-loader) PreLoader for linting code using [JSHint](http://jshint.com/about/)
50+
* `jscs-loader` PreLoader for code style checking using [JSCS](http://jscs.info/)
51+
* [`coverjs-loader`](/loaders/coverjs-loader) PreLoader to determine the testing coverage using [CoverJS](https://github.com/arian/CoverJS)
52+
53+
## Frameworks
54+
* `vue-loader` Loads and compiles [Vue Components](https://vuejs.org/v2/guide/components.html)
55+
* `polymer-loader` Process HTML & CSS with preprocessor of choice and `require()` Web Components like first-class modules
56+
* `angular2-template-loader` Loads and compiles [Angular](https://angular.io/) Components
57+
58+
59+
![Awesome](../assets/awesome-badge.svg)
60+
For more third-party loaders, see the list from [awesome-webpack](https://github.com/webpack-contrib/awesome-webpack#loaders).

0 commit comments

Comments
 (0)