docs(guides): some fixes (#4172)

Author: chenxsan

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,18 +145,18 @@ $ 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
   modules by path ./node_modules/ 538 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 `<style>` tag is dynamically created by JavaScript) and look at the page's head tags. It should contain the style block that we imported in `index.js`.
@@ -166,7 +166,7 @@ Note that you can, and in most cases should, [minimize css](/plugins/mini-css-ex
 
 ## Loading Images
 
-So now we're pulling in our CSS, but what about our images like backgrounds and icons? As of webpack 5, using the [Asset Modules](/guides/asset-modules/) we can easily incorporate those in our system as well:
+So now we're pulling in our CSS, but what about our images like backgrounds and icons? As of webpack 5, using the built-in [Asset Modules](/guides/asset-modules/) we can easily incorporate those in our system as well:
 
 __webpack.config.js__
 
@@ -249,32 +249,32 @@ __src/style.css__
  }
 ```
 
-Let's create a new build and open up the index.html file again:
+Let's create a new build and open up the `index.html` file again:
 
 ``` bash
 $ npm run build
 
 ...
 [webpack-cli] Compilation finished
-asset 3b7bf087cbac835e6f7d.png 233 KiB [emitted] [immutable] [from: src/icon.png] (auxiliary name: main)
+assets by status 9.88 KiB [cached] 1 asset
 asset bundle.js 73.4 KiB [emitted] [minimized] (name: main) 1 related asset
 runtime modules 1.82 KiB 6 modules
 orphan modules 326 bytes [orphan] 1 module
-cacheable modules 540 KiB (javascript) 233 KiB (asset)
+cacheable modules 540 KiB (javascript) 9.88 KiB (asset)
   modules by path ./node_modules/ 539 KiB
     modules by path ./node_modules/css-loader/dist/runtime/*.js 2.38 KiB
       ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
       ./node_modules/css-loader/dist/runtime/getUrl.js 830 bytes [built] [code generated]
     ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
     ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
-  modules by path ./src/ 1.45 KiB (javascript) 233 KiB (asset)
-    ./src/index.js + 1 modules 795 bytes [built] [code generated]
-    ./src/icon.png 42 bytes (javascript) 233 KiB (asset) [built] [code generated]
+  modules by path ./src/ 1.45 KiB (javascript) 9.88 KiB (asset)
+    ./src/index.js + 1 modules 794 bytes [built] [code generated]
+    ./src/icon.png 42 bytes (javascript) 9.88 KiB (asset) [built] [code generated]
     ./node_modules/css-loader/dist/cjs.js!./src/style.css 648 bytes [built] [code generated]
-webpack 5.4.0 compiled successfully in 5879 ms
+webpack 5.4.0 compiled successfully in 1972 ms
 ```
 
-If all went well, you should now see your icon as a repeating background, as well as an `img` element beside our `Hello webpack` text. If you inspect this element, you'll see that the actual filename has changed to something like `3b7bf087cbac835e6f7d.png`. This means webpack found our file in the `src` folder and processed it!
+If all went well, you should now see your icon as a repeating background, as well as an `img` element beside our `Hello webpack` text. If you inspect this element, you'll see that the actual filename has changed to something like `29822eaa871e8eadeaa4.png`. This means webpack found our file in the `src` folder and processed it!
 
 
 ## Loading Fonts
@@ -359,27 +359,27 @@ $ npm run build
 
 ...
 [webpack-cli] Compilation finished
-assets by status 233 KiB [cached] 1 asset
+assets by status 9.88 KiB [cached] 1 asset
 assets by info 33.2 KiB [immutable]
   asset 55055dbfc7c6a83f60ba.woff 18.8 KiB [emitted] [immutable] [from: src/my-font.woff] (auxiliary name: main)
   asset 8f717b802eaab4d7fb94.woff2 14.5 KiB [emitted] [immutable] [from: src/my-font.woff2] (auxiliary name: main)
 asset bundle.js 73.7 KiB [emitted] [minimized] (name: main) 1 related asset
 runtime modules 1.82 KiB 6 modules
 orphan modules 326 bytes [orphan] 1 module
-cacheable modules 541 KiB (javascript) 266 KiB (asset)
+cacheable modules 541 KiB (javascript) 43.1 KiB (asset)
   javascript modules 541 KiB
     modules by path ./node_modules/ 539 KiB
       modules by path ./node_modules/css-loader/dist/runtime/*.js 2.38 KiB 2 modules
       ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
       ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
     modules by path ./src/ 1.98 KiB
-      ./src/index.js + 1 modules 795 bytes [built] [code generated]
+      ./src/index.js + 1 modules 794 bytes [built] [code generated]
       ./node_modules/css-loader/dist/cjs.js!./src/style.css 1.21 KiB [built] [code generated]
-  asset modules 126 bytes (javascript) 266 KiB (asset)
-    ./src/icon.png 42 bytes (javascript) 233 KiB (asset) [built] [code generated]
+  asset modules 126 bytes (javascript) 43.1 KiB (asset)
+    ./src/icon.png 42 bytes (javascript) 9.88 KiB (asset) [built] [code generated]
     ./src/my-font.woff2 42 bytes (javascript) 14.5 KiB (asset) [built] [code generated]
     ./src/my-font.woff 42 bytes (javascript) 18.8 KiB (asset) [built] [code generated]
-webpack 5.4.0 compiled successfully in 3763 ms
+webpack 5.4.0 compiled successfully in 2142 ms
 ```
 
 Open up `dist/index.html` again and see if our `Hello webpack` text has changed to the new font. If all is well, you should see the changes.
@@ -716,14 +716,14 @@ __project__
     |- bundle.js
     |- index.html
   |- /src
--   |- data.xml
 -   |- data.csv
+-   |- data.json5
 -   |- data.toml
+-   |- data.xml
 -   |- data.yaml
--   |- data.json5
+-   |- icon.png
 -   |- my-font.woff
 -   |- my-font.woff2
--   |- icon.png
 -   |- style.css
     |- index.js
   |- /node_modules
@@ -837,7 +837,7 @@ __src/index.js__
 And remove those dependencies we added before:
 
 ```bash
-npm rm csv-loader xml-loader toml yamljs json5
+npm uninstall css-loader csv-loader json5 style-loader toml xml-loader yamljs
 ```
 
 ## Next guide

src/content/guides/development.md

@@ -34,7 +34,7 @@ __webpack.config.js__
  module.exports = {
 +  mode: 'development',
    entry: {
-     app: './src/index.js',
+     index: './src/index.js',
      print: './src/print.js',
    },
    plugins: [
@@ -71,7 +71,7 @@ __webpack.config.js__
  module.exports = {
    mode: 'development',
    entry: {
-     app: './src/index.js',
+     index: './src/index.js',
      print: './src/print.js',
    },
 +  devtool: 'inline-source-map',
@@ -104,15 +104,15 @@ Run an `npm run build`, it should compile to something like this:
 ``` bash
 ...
 [webpack-cli] Compilation finished
-asset app.bundle.js 1.38 MiB [emitted] (name: app)
+asset index.bundle.js 1.38 MiB [emitted] (name: index)
 asset print.bundle.js 6.25 KiB [emitted] (name: print)
-asset index.html 276 bytes [emitted]
+asset index.html 272 bytes [emitted]
 runtime modules 1.9 KiB 9 modules
 cacheable modules 530 KiB
-  ./src/index.js 407 bytes [built] [code generated]
+  ./src/index.js 406 bytes [built] [code generated]
   ./src/print.js 83 bytes [built] [code generated]
   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.4.0 compiled successfully in 759 ms
+webpack 5.4.0 compiled successfully in 706 ms
 ```
 
 Now open the resulting `index.html` file in your browser. Click the button and look in your console where the error is displayed. The error should say something like this:
@@ -134,8 +134,8 @@ It quickly becomes a hassle to manually run `npm run build` every time you want
 There are a couple of different options available in webpack that help you automatically compile your code whenever it changes:
 
  1. webpack's [Watch Mode](/configuration/watch/#watch)
- 2. webpack-dev-server
- 3. webpack-dev-middleware
+ 2. [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
+ 3. [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware)
 
 In most cases, you probably would want to use `webpack-dev-server`, but let's explore all of the above options.
 
@@ -164,9 +164,7 @@ __package.json__
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^3.0.0",
-     "css-loader": "^5.0.1",
      "html-webpack-plugin": "^4.5.0",
-     "style-loader": "^2.0.0",
      "webpack": "^5.4.0",
      "webpack-cli": "^4.2.0"
    },
@@ -188,7 +186,7 @@ __webpack.config.js__
  module.exports = {
    mode: 'development',
    entry: {
-     app: './src/index.js',
+     index: './src/index.js',
      print: './src/print.js',
    },
    devtool: 'inline-source-map',
@@ -245,7 +243,7 @@ __webpack.config.js__
  module.exports = {
    mode: 'development',
    entry: {
-     app: './src/index.js',
+     index: './src/index.js',
      print: './src/print.js',
    },
    devtool: 'inline-source-map',
@@ -290,9 +288,7 @@ __package.json__
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^3.0.0",
-     "css-loader": "^5.0.1",
      "html-webpack-plugin": "^4.5.0",
-     "style-loader": "^2.0.0",
      "webpack": "^5.4.0",
      "webpack-cli": "^4.2.0",
      "webpack-dev-server": "^3.11.0"
@@ -332,7 +328,7 @@ __webpack.config.js__
  module.exports = {
    mode: 'development',
    entry: {
-     app: './src/index.js',
+     index: './src/index.js',
      print: './src/print.js',
    },
    devtool: 'inline-source-map',
@@ -416,13 +412,11 @@ __package.json__
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^3.0.0",
-     "css-loader": "^5.0.1",
      "express": "^4.17.1",
      "html-webpack-plugin": "^4.5.0",
-     "style-loader": "^2.0.0",
      "webpack": "^5.4.0",
      "webpack-cli": "^4.2.0",
-     "webpack-dev-middleware": "^4.0.0",
+     "webpack-dev-middleware": "^4.0.2",
      "webpack-dev-server": "^3.11.0"
    },
    "dependencies": {
@@ -436,20 +430,20 @@ Now in your terminal run `npm run server`, it should give you an output similar
 ``` bash
 Example app listening on port 3000!
 ...
-<i> [webpack-dev-middleware] asset app.bundle.js 1.38 MiB [emitted] (name: app)
+<i> [webpack-dev-middleware] asset index.bundle.js 1.38 MiB [emitted] (name: index)
 <i> asset print.bundle.js 6.25 KiB [emitted] (name: print)
-<i> asset index.html 278 bytes [emitted]
+<i> asset index.html 274 bytes [emitted]
 <i> runtime modules 1.9 KiB 9 modules
 <i> cacheable modules 530 KiB
-<i>   ./src/index.js 407 bytes [built] [code generated]
+<i>   ./src/index.js 406 bytes [built] [code generated]
 <i>   ./src/print.js 83 bytes [built] [code generated]
 <i>   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-<i> webpack 5.4.0 compiled successfully in 672 ms
+<i> webpack 5.4.0 compiled successfully in 709 ms
 <i> [webpack-dev-middleware] Compiled successfully.
 <i> [webpack-dev-middleware] Compiling...
 <i> [webpack-dev-middleware] assets by status 1.38 MiB [cached] 2 assets
 <i> cached modules 530 KiB (javascript) 1.9 KiB (runtime) [cached] 12 modules
-<i> webpack 5.4.0 compiled successfully in 14 ms
+<i> webpack 5.4.0 compiled successfully in 19 ms
 <i> [webpack-dev-middleware] Compiled successfully.
 ```
 

src/content/guides/getting-started.md

@@ -27,11 +27,11 @@ contributors:
 
 webpack is used to compile JavaScript modules. Once [installed](/guides/installation), you can interact with webpack either from its [CLI](/api/cli) or [API](/api/node). If you're still new to webpack, please read through the [core concepts](/concepts) and [this comparison](/comparison) to learn why you might use it over the other tools that are out in the community.
 
-W> The minimum Node.js version to run webpack 5 is 10.13.0 (LTS)
+W> The minimum supported Node.js version to run webpack 5 is 10.13.0 (LTS)
 
 ## Basic Setup
 
-First let's create a directory, initialize npm, [install webpack locally](/guides/installation/#local-installation), and install the webpack-cli (the tool used to run webpack on the command line):
+First let's create a directory, initialize npm, [install webpack locally](/guides/installation/#local-installation), and install the [`webpack-cli`](https://github.com/webpack/webpack-cli) (the tool used to run webpack on the command line):
 
 ``` bash
 mkdir webpack-demo
@@ -129,7 +129,7 @@ Let's use webpack to manage these scripts instead.
 
 ## Creating a Bundle
 
-First we'll tweak our directory structure slightly, separating the "source" code (`/src`) from our "distribution" code (`/dist`). The "source" code is the code that we'll write and edit. The "distribution" code is the minimized and optimized `output` of our build process that will eventually be loaded in the browser. Tweak the directory structure as follows:
+First we'll tweak our directory structure slightly, separating the "source" code (`./src`) from our "distribution" code (`./dist`). The "source" code is the code that we'll write and edit. The "distribution" code is the minimized and optimized `output` of our build process that will eventually be loaded in the browser. Tweak the directory structure as follows:
 
 __project__
 
@@ -151,7 +151,7 @@ npm install --save lodash
 
 T> When installing a package that will be bundled into your production bundle, you should use `npm install --save`. If you're installing a package for development purposes (e.g. a linter, testing libraries, etc.) then you should use `npm install --save-dev`. More information can be found in the [npm documentation](https://docs.npmjs.com/cli/install).
 
-Now, lets import `lodash` in our script:
+Now, let's import `lodash` in our script:
 
 __src/index.js__
 
@@ -171,7 +171,7 @@ __src/index.js__
  document.body.appendChild(component());
 ```
 
-Now, since we'll be bundling our scripts, we have to update our `index.html` file. Let's remove the lodash `<script>`, as we now `import` it, and modify the other `<script>` tag to load the bundle, instead of the raw `/src` file:
+Now, since we'll be bundling our scripts, we have to update our `index.html` file. Let's remove the lodash `<script>`, as we now `import` it, and modify the other `<script>` tag to load the bundle, instead of the raw `./src` file:
 
 __dist/index.html__
 
@@ -202,16 +202,13 @@ runtime modules 1000 bytes 5 modules
 cacheable modules 530 KiB
   ./src/index.js 257 bytes [built] [code generated]
   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.4.0 compiled successfully in 3619 ms
+webpack 5.4.0 compiled successfully in 1851 ms
 ```
 
-T> Your output may vary a bit, but if the build is successful then you are good to go. Also, don't worry about the warning, we'll tackle that later.
+T> Your output may vary a bit, but if the build is successful then you are good to go.
 
 Open `index.html` from the `dist` directory in your browser and, if everything went right, you should see the following text: `'Hello webpack'`.
 
-W> If you are getting a syntax error in the middle of minified JavaScript when opening `index.html` in the browser, set [`development mode`](/configuration/mode/#mode-development) and run `npx webpack` again. This is related to running `npx webpack` on latest Node.js (v12.5+) instead of [LTS version](https://nodejs.org/en/).
-
-
 ## Modules
 
 The [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) statements have been standardized in [ES2015](https://babeljs.io/docs/en/learn/). They are supported in most of the browsers at this moment, however there are some browsers that don't recognize the new syntax. But don't worry, webpack does support them out of the box.
@@ -261,7 +258,7 @@ runtime modules 1000 bytes 5 modules
 cacheable modules 530 KiB
   ./src/index.js 257 bytes [built] [code generated]
   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.4.0 compiled successfully in 3516 ms
+webpack 5.4.0 compiled successfully in 1934 ms
 ```
 
 T> If a `webpack.config.js` is present, the `webpack` command picks it up by default. We use the `--config` option here only to show that you can pass a configuration of any name. This will be useful for more complex configurations that need to be split into multiple files.
@@ -276,7 +273,7 @@ Given it's not particularly fun to run a local copy of webpack from the CLI, we
 __package.json__
 
 ``` diff
-{
+ {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
@@ -299,7 +296,7 @@ __package.json__
  }
 ```
 
-Now the `npm run build` command can be used in place of the `npx` command we used earlier. Note that within `scripts` we can reference locally installed npm packages by name the same way we did with `npx`. This convention is the standard in most npm-based projects because it allows all contributors to use the same set of common scripts (each with flags like `--config` if necessary).
+Now the `npm run build` command can be used in place of the `npx` command we used earlier. Note that within `scripts` we can reference locally installed npm packages by name the same way we did with `npx`. This convention is the standard in most npm-based projects because it allows all contributors to use the same set of common scripts.
 
 Now run the following command and see if your script alias works:
 
@@ -314,7 +311,7 @@ runtime modules 1000 bytes 5 modules
 cacheable modules 530 KiB
   ./src/index.js 257 bytes [built] [code generated]
   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.4.0 compiled successfully in 3764 ms
+webpack 5.4.0 compiled successfully in 1940 ms
 ```
 
 T> Custom parameters can be passed to webpack by adding two dashes between the `npm run build` command and your parameters, e.g. `npm run build -- --color`.