diff --git a/src/content/guides/asset-management.md b/src/content/guides/asset-management.md
index 40e6c61b7049..dea9329b088e 100644
--- a/src/content/guides/asset-management.md
+++ b/src/content/guides/asset-management.md
@@ -26,32 +26,33 @@ Let's make a minor change to our project before we get started:
__dist/index.html__
``` diff
-
-
-
+
+
+
+
- Getting Started
+ Asset Management
-
-
--
-+
-
-
+
+
+-
++
+
+
```
__webpack.config.js__
``` diff
- const path = require('path');
-
- module.exports = {
- entry: './src/index.js',
- output: {
-- filename: 'main.js',
-+ filename: 'bundle.js',
- path: path.resolve(__dirname, 'dist'),
- },
- };
+ const path = require('path');
+
+ module.exports = {
+ entry: './src/index.js',
+ output: {
+- filename: 'main.js',
++ filename: 'bundle.js',
+ path: path.resolve(__dirname, 'dist'),
+ },
+ };
```
@@ -66,31 +67,28 @@ npm install --save-dev style-loader css-loader
__webpack.config.js__
``` diff
- const 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',
-+ ],
-+ },
-+ ],
-+ },
- };
+ const path = require('path');
+
+ module.exports = {
+ entry: './src/index.js',
+ output: {
+ filename: 'bundle.js',
+ path: path.resolve(__dirname, 'dist'),
+ },
++ module: {
++ rules: [
++ {
++ test: /\.css$/i,
++ use: ['style-loader', 'css-loader'],
++ },
++ ],
++ },
+ };
```
Module loaders can be chained. Each loader in the chain applies transformations to the processed resource. A chain is executed in reverse order. The first loader passes its result (resource with applied transformations) to the next one, and so forth. Finally, webpack expects JavaScript to be returned by the last loader in the chain.
-The above order of loaders should be maintained: 'style-loader' comes first and followed by 'css-loader'. If this convention is not followed, webpack is likely to throw errors.
+The above order of loaders should be maintained: [`'style-loader'`](/loaders/style-loader) comes first and followed by [`'css-loader'`](/loaders/css-loader). If this convention is not followed, webpack is likely to throw errors.
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`.
@@ -124,76 +122,76 @@ __src/style.css__
__src/index.js__
``` diff
- import _ from 'lodash';
-+ import './style.css';
-
- function component() {
- const element = document.createElement('div');
-
- // Lodash, now imported by this script
- element.innerHTML = _.join(['Hello', 'webpack'], ' ');
-+ element.classList.add('hello');
-
- return element;
- }
-
- document.body.appendChild(component());
+ import _ from 'lodash';
++import './style.css';
+
+ function component() {
+ const element = document.createElement('div');
+
+ // Lodash, now imported by this script
+ element.innerHTML = _.join(['Hello', 'webpack'], ' ');
++ element.classList.add('hello');
+
+ return element;
+ }
+
+ document.body.appendChild(component());
```
Now run your build command:
``` bash
-npm run build
+$ npm run build
...
- Asset Size Chunks Chunk Names
-bundle.js 76.4 KiB 0 [emitted] main
-Entrypoint main = bundle.js
-...
-```
-
-Open up `index.html` in your browser again and you should see that `Hello webpack` is now styled in red. To see what webpack did, inspect the page (don't view the page source, as it won't show you the result, because the `