Merge pull request #736 from simon04/loaders

concepts/loaders: improve, add code example

Author: bebraw

content/concepts/loaders.md

@@ -6,11 +6,47 @@ contributors:
   - ev1stensberg
   - SpaceK33z
   - gangachris
+  - simon04
 ---
 
 Loaders are transformations that are applied on a resource file of your application. They are functions (running in Node.js) that take the source of a resource file as the parameter and return the new source.
 
-For example, you can use loaders to tell webpack to load a CSS file or to convert TypeScript to JavaScript.
+## Example
+
+For example, you can use loaders to tell webpack to load a CSS file or to convert TypeScript to JavaScript. Firstly, install the corresponding loaders:
+
+```
+npm install --save-dev css-loader
+npm install --save-dev ts-loader
+```
+
+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`:
+
+**webpack.config.js**
+
+```js-with-links-with-details
+module.exports = {
+  module: {
+    rules: [
+      {test: /\.css$/, use: ['css-loader'](/loaders/css-loader)},
+      {test: /\.ts$/, use: ['ts-loader'](https://github.com/TypeStrong/ts-loader)}
+    ]
+  }
+};
+```
+
+Note that according to the [configuration options](/configuration#options), the following specifications define the identical loader usage:
+
+```js-with-links-with-details
+{test: /\.css$/, [loader](/configuration/module#rule-loader): 'css-loader'}
+// or equivalently
+{test: /\.css$/, [use](/configuration/module#rule-use): 'css-loader'}
+// or equivalently
+{test: /\.css$/, [use](/configuration/module#rule-use): {
+  loader: 'css-loader',
+  options: {}
+}}
+```
 
 ## Loader Features
 
@@ -28,9 +64,9 @@ functions (loaders). Users now have more flexibility to include fine-grained log
 
 ## Resolving Loaders
 
-Loaders are [resolved similar to modules](/concepts/module-resolution/). A loader module is expected to export a function and to be written in Node.js compatible JavaScript. In the common case you manage loaders with npm, but you can also have loaders as files in your app.
+Loaders follow the standard [module resolution](/concepts/module-resolution/). In most cases you will be loaders from the [module path](/concepts/module-resolution/#module-paths) (think `npm install`, `node_modules`).
 
-### Referencing Loaders
+[How to write a loader?](/development/how-to-write-a-loader) A loader module is expected to export a function and to be written in Node.js compatible JavaScript. In the common case you manage loaders with npm, but you can also have loaders as files in your app.
 
 By convention, loaders are usually named as `XXX-loader`, where `XXX` is the context name. For example, `json-loader`.
 

content/loaders/index.md

@@ -10,6 +10,8 @@ contributors:
 
 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.
 
+?> Move the general usage documentation to the [concepts page](/concepts/loaders) and focus here on describing the available loaders (similar to [plugins](/plugins)).
+
 A loader is typically a npm package, which you can install as a development dependency:
 
 ```sh