diff --git a/content/guides/asset-management.md b/content/guides/asset-management.md
index f7d51e94f250..2d108a0d6a07 100644
--- a/content/guides/asset-management.md
+++ b/content/guides/asset-management.md
@@ -4,18 +4,37 @@ sort: 3
contributors:
- skipjack
- michael-ciniawsky
+ - TheDutchCoder
---
-So you're all set up with webpack -- transforming and linting your JavaScript modules, generating an html file with the [`HTMLWebpackPlugin`](/plugins/html-webpack-plugin), and even loading some css through your JavaScript modules with the [css-loader](/loaders/css-loader). But wait, your site requires a whole bunch of other assets like images (e.g. `.png`, `.jpg`, `.svg`), fonts (e.g. `.woff`, `.woff2`, `.eot`), and data (e.g. `.json`, `.xml`, `.csv`)!
+If you've been following the guides from the start, you will now have a small project that shows "Hello webpack". Now let's try to incorporate some other assets, like images, to see how they can be handled.
-Prior to webpack, front-end developers would use tools like grunt and gulp to process these "web assets" and move them from their `/src` folder into their `/dist` or `/build` directory. The same idea was used for JavaScript modules, but, as you likely already know, tools like webpack will now "enter" your application and __dynamically bundle__ all dependencies (creating what's known as a [dependency graph](/concepts/dependency-graph)). This is great because every module now _explicitly states its dependencies_ and we'll avoid bundling modules that aren't in use.
+Prior to webpack, front-end developers would use tools like grunt and gulp to process these assets and move them from their `/src` folder into their `/dist` or `/build` directory. The same idea was used for JavaScript modules, but tools like webpack will __dynamically bundle__ all dependencies (creating what's known as a [dependency graph](/concepts/dependency-graph)). This is great because every module now _explicitly states its dependencies_ and we'll avoid bundling modules that aren't in use.
-One of the coolest webpack features is that you can also _include any other type of file_, besides JavaScript, for which there is a loader. This means that the same benefits listed above for JavaScript (e.g. explicit dependencies) can be applied to everything used in building a website or web app. Let's start with CSS, as you may already be familiar with that setup...
+One of the coolest webpack features is that you can also _include any other type of file_, besides JavaScript, for which there is a loader. This means that the same benefits listed above for JavaScript (e.g. explicit dependencies) can be applied to everything used in building a website or web app. Let's start with CSS, as you may already be familiar with that setup.
+
+## Setup
+
+Let's make a minor change to our project before we get started:
+
+__dist/index.html__
+
+``` diff
+
+
+- Getting Started
++ Asset Management
+
+
+
+
+
+```
## Loading CSS
-In order to `import` a CSS file from within a JavaScript module, you simply need to install and add the [style-loader](/loaders/style-loader) and [css-loader](/loaders/css-loader) to your [`module` configuration](/configuration/module)...
+In order to `import` a CSS file from within a JavaScript module, you need to install and add the [style-loader](/loaders/style-loader) and [css-loader](/loaders/css-loader) to your [`module` configuration](/configuration/module):
``` bash
npm install --save-dev style-loader css-loader
@@ -23,32 +42,106 @@ npm install --save-dev style-loader css-loader
__webpack.config.js__
-``` js
-module.exports = {
- //...
- module: {
- rules: [
- {
- test: /\.css$/,
- use: [
- 'style-loader',
- 'css-loader'
- ]
- }
- ]
- },
- //...
-}
+``` diff
+ var path = require('path');
+
+ module.exports = {
+ entry: './src/index.js',
+ output: {
+ filename: 'bundle.js',
+ path: path.resolve(__dirname, 'dist')
+ },
++ module: {
++ rules: [
++ {
++ test: /\.css$/,
++ use: [
++ 'style-loader',
++ 'css-loader'
++ ]
++ }
++ ]
++ }
+ };
```
+T> webpack uses a regular expression to determine which files it should look for and serve to a specific loader. In this case any file that ends with `.css` will be served to the `style-loader` and the `css-loader`.
+
This enables you to `import './style.css'` into the file that depends on that styling. Now, when that module is run, a `