diff --git a/src/content/guides/asset-management.md b/src/content/guides/asset-management.md index dea9329b088e..74008ed3c743 100644 --- a/src/content/guides/asset-management.md +++ b/src/content/guides/asset-management.md @@ -17,7 +17,7 @@ If you've been following the guides from the start, you will now have a small pr Prior to webpack, front-end developers would use tools like [grunt](https://gruntjs.com/) and [gulp](https://gulpjs.com/) 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 or built-in [Asset Modules](/guides/asset-modules/) support. 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 @@ -145,7 +145,7 @@ $ npm run build ... [webpack-cli] Compilation finished -asset bundle.js 72.6 KiB [compared for emit] [minimized] (name: main) 1 related asset +asset bundle.js 72.6 KiB [emitted] [minimized] (name: main) 1 related asset runtime modules 1000 bytes 5 modules orphan modules 326 bytes [orphan] 1 module cacheable modules 539 KiB @@ -153,10 +153,10 @@ cacheable modules 539 KiB ./node_modules/lodash/lodash.js 530 KiB [built] [code generated] ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated] ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated] - modules by path ./src/ 966 bytes - ./src/index.js + 1 modules 640 bytes [built] [code generated] + modules by path ./src/ 965 bytes + ./src/index.js + 1 modules 639 bytes [built] [code generated] ./node_modules/css-loader/dist/cjs.js!./src/style.css 326 bytes [built] [code generated] -webpack 5.4.0 compiled successfully in 2900 ms +webpack 5.4.0 compiled successfully in 2231 ms ``` Open up `dist/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 `