diff --git a/src/content/guides/asset-management.mdx b/src/content/guides/asset-management.mdx
index 89fda4c310e3..b584221b89bd 100644
--- a/src/content/guides/asset-management.mdx
+++ b/src/content/guides/asset-management.mdx
@@ -18,15 +18,15 @@ translators:
   - Yucohny
 ---
 
-如果你是从一开始就沿用指南的示例，现在应该有一个显示 “Hello webpack” 的小项目。接下来我们尝试混合一些图像之类的其他资源，看看 webpack 如何处理。
+如果是从一开始就沿用指南的示例，现在应该有一个可以显示“Hello webpack”的小项目。接下来尝试混合一些图像之类的其他资源，看看 webpack 如何处理。
 
-在 webpack 出现之前，前端开发人员会使用 [grunt](https://gruntjs.com/) 和 [gulp](https://gulpjs.com/) 等工具来处理资源，并将它们从 `/src` 文件夹移动到 `/dist` 或 `/build` 目录中。JavaScript 模块也遵循同样的方式，但是，像 webpack 这样的工具将 **动态打包** 所有依赖（创建所谓的 [依赖图](/concepts/dependency-graph)）。这是极好的创举，因为现在每个模块都可以 **明确表述它自身的依赖**，以避免打包未使用的模块。
+在 webpack 出现之前，前端开发人员会使用 [grunt](https://gruntjs.com/) 和 [gulp](https://gulpjs.com/) 等工具处理资源，并将它们从 `/src` 文件夹移动到 `/dist` 或 `/build` 目录中。JavaScript 模块也遵循同样的方式。但是，像 webpack 这样的工具将 **动态打包** 所有依赖并创建所谓的 [依赖图](/concepts/dependency-graph)。这是极好的创举，因为现在每个模块都可以 **明确表述它自身的依赖**，以避免打包未使用的模块。
 
-webpack 最出色的功能之一就是除了引入 JavaScript，还可以通过 loader 或内置的 [Asset Modules](/guides/asset-modules/) **引入任何其他类型的文件**。换言之，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了下面这些设置。
+webpack 最出色的功能之一就是除了引入 JavaScript，还可以通过 loader 或内置的 [资源模块](/guides/asset-modules/) **引入任何其他类型的文件**。换言之，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了下面这些设置。
 
 ## 设置 $#setup$
 
-在开始之前，让我们对项目做一个小的修改：
+在开始前对项目做一个小的修改：
 
 **dist/index.html**
 
@@ -62,7 +62,7 @@ webpack 最出色的功能之一就是除了引入 JavaScript，还可以通过
 
 ## 加载 CSS $#loading-css$
 
-要想在 JavaScript 模块中 `import` CSS 文件，需要安装 [style-loader](/loaders/style-loader) 和 [css-loader](/loaders/css-loader)，并在 [`module` 配置](/configuration/module) 中添加这些 loader：
+要想在 JavaScript 模块中导入 CSS 文件，需要安装 [style-loader](/loaders/style-loader) 和 [css-loader](/loaders/css-loader)，并在 [`module` 配置](/configuration/module) 中添加这些 loader：
 
 ```bash
 npm install --save-dev style-loader css-loader
@@ -96,7 +96,7 @@ module loader 可以链式调用。链中的每个 loader 都将对资源进行
 
 T> webpack 根据正则表达式确定应该查找哪些文件，并将其提供给指定的 loader。在此示例中，所有以 `.css` 结尾的文件，都将被提供给 `style-loader` 和 `css-loader`。
 
-这使你可以在依赖于此样式的 JavaScript 文件中 `import './style.css'`。现在，在此模块执行过程中，含有 CSS 字符串的 `<style>` 标签，将被插入到 html 文件的 `<head>` 中。
+这些配置可以帮助在依赖于此样式的 JavaScript 文件中 `import './style.css'`。现在，在此模块执行过程中，含有 CSS 字符串的 `<style>` 标签，将被插入到 HTML 文件的 `<head>` 中。
 
 让我们来试试！现在在项目中添加一个新的 `style.css` 文件，并将其导入到 `index.js` 中：
 
@@ -164,13 +164,13 @@ cacheable modules 539 KiB
 webpack 5.4.0 compiled successfully in 2231 ms
 ```
 
-再次在浏览器中打开 `dist/index.html`，应该看到 `Hello webpack` 现在的样式是红色。要查看 webpack 做了什么，请检查页面（不要查看页面源代码，它不会显示结果，因为 `<style>` 标签是由 JavaScript 动态创建的），并查看页面的 head 标签。它应该包含 style 块元素，也就是在 `index.js` 中导入的 CSS 文件中的样式。
+再次在浏览器中打开 `dist/index.html`，应该看到 `Hello webpack` 现在的样式是红色。请检查页面（不要查看页面源代码，它不会显示结果，因为 `<style>` 标签是由 JavaScript 动态创建的）并查看页面的 head 标签以观察 webpack 做了什么。可以发现，head 标签包含了原本不存在的 style 块元素，也就是在 `index.js` 中导入的 CSS 文件中的样式。
 
-注意，在多数情况下，你也可以 [压缩 CSS](/plugins/mini-css-extract-plugin/#minimizing-for-production)，以便在生产环境中节省加载时间。最重要的是，现有的 loader 可以支持任何你可以想到的 CSS 风格 —— [postcss](/loaders/postcss-loader)、[sass](/loaders/sass-loader) 和 [less](/loaders/less-loader) 等。
+注意，在多数情况下也可以 [压缩 CSS](/plugins/mini-css-extract-plugin/#minimizing-for-production) 以便在生产环境中节省加载时间。最重要的是，现有的 loader 可以支持任何可以想到的 CSS 样式 —— [postcss](/loaders/postcss-loader)、[sass](/loaders/sass-loader) 和 [less](/loaders/less-loader) 等。
 
 ## 加载图像 $#loading-images$
 
-假如，现在正在下载 CSS，但是像 background 和 icon 这样的图像应该如何处理呢？在 webpack 5 中，使用内置的 [Asset Modules](/guides/asset-modules/) 便可以轻松地将这些内容混入我们的系统中：
+假如现在正在下载 CSS，但是像背景图片和图标这样的图像应该如何处理呢？webpack5 可以使用内置的 [资源模块](/guides/asset-modules/) 轻松地将这些内容混入系统中：
 
 **webpack.config.js**
 
@@ -198,9 +198,9 @@ webpack 5.4.0 compiled successfully in 2231 ms
  };
 ```
 
-现在，在 `import MyImage from './my-image.png'` 时，图像将被处理并添加到 `output` 目录，**并且** `MyImage` 变量将包含该图像在处理后的最终的 url。如前所示，在使用 [css-loader](/loaders/css-loader) 时，处理 CSS 中的 `url('./my-image.png')` 也会发生类似过程。loader 会识别这是一个本地文件，并将 `'./my-image.png'` 路径替换为 `output` 目录中图像的最终路径。而 [html-loader](/loaders/html-loader) 以相同方式处理 `<img src="./my-image.png" />`。
+现在 `import MyImage from './my-image.png'` 将会处理图像，将其添加到 `output` 目录，并且 `MyImage` 变量将包含该图像在处理后的最终的 url。如前所示，在使用 [css-loader](/loaders/css-loader) 时，处理 CSS 中的 `url('./my-image.png')` 也会发生类似过程。loader 会识别这是一个本地文件，并将 `'./my-image.png'` 路径替换为 `output` 目录中图像的最终路径。而 [html-loader](/loaders/html-loader) 也以相同方式处理 `<img src="./my-image.png" />`。
 
-试试向项目中添加一个图像，并观察它是如何工作的，你可以使用任何你喜欢的图像：
+试试向项目中添加一个图像，并观察它是如何工作的：
 
 **project**
 
@@ -279,11 +279,11 @@ cacheable modules 540 KiB (javascript) 9.88 KiB (asset)
 webpack 5.4.0 compiled successfully in 1972 ms
 ```
 
-如果一切顺利，现在应该看到图标成为了重复的背景图，并且 `Hello webpack` 文本旁边出现了 `img` 元素。如果检查此元素，你将看到实际的文件名已更改为像 `29822eaa871e8eadeaa4.png` 一样的名称。这意味着 webpack 在 `src` 文件夹中找到了我们的文件，并对其进行了处理！
+如果一切顺利，现在应该看到图标成为了重复的背景图，并且 `Hello webpack` 文本旁边出现了 `img` 元素。检查此元素将看到实际的文件名已更改为像 `29822eaa871e8eadeaa4.png` 一样的名称。这意味着 webpack 在 `src` 文件夹中找到了我们的文件，并对其进行了处理！
 
 ## 加载字体 $#loading-fonts$
 
-那么，像字体这样的其他资源如何处理呢？使用 Asset Modules 可以接收并加载任何文件，然后将其输出到构建目录。换言之，我们可以将它们用于任何类型的文件，也包括字体。让我们更新 `webpack.config.js` 来处理字体文件：
+使用资源模块可以接收并加载任何文件，然后将其输出到构建目录。换言之，我们可以将它们用于任何类型的文件，也包括字体文件。更新 `webpack.config.js` 以处理字体文件：
 
 **webpack.config.js**
 
@@ -336,7 +336,7 @@ webpack 5.4.0 compiled successfully in 1972 ms
   |- /node_modules
 ```
 
-配置好 loader 并将字体文件放在合适的位置后，可以通过 `@font-face` 声明将其混合。本地的 `url(...)` 指令会被 webpack 获取并处理，就像它处理图片一样：
+配置好 loader 并将字体文件放在合适的位置后，可以通过 `@font-face` 声明将其混合。本地的 `url(...)` 指令会被 webpack 获取并处理，就像处理图片一样：
 
 **src/style.css**
 
@@ -386,11 +386,11 @@ cacheable modules 541 KiB (javascript) 43.1 KiB (asset)
 webpack 5.4.0 compiled successfully in 2142 ms
 ```
 
-重新打开 `dist/index.html` 看看 `Hello webpack` 文本是否换上了新的字体。如果一切顺利，你应该能看到已经发生了变化。
+重新打开 `dist/index.html` 观察 `Hello webpack` 文本是否换上了新的字体。如果一切顺利，应该能看到已经发生了变化。
 
 ## 加载数据 $#loading-data$
 
-此外，可以加载的有用资源还有数据，如 JSON 文件、CSV、TSV 和 XML。与 NodeJS 类似，对 JSON 的支持实际上也是内置的，即 `import Data from './data.json'` 默认将正常运行。如果要导入 CSV、TSV 和 XML，你可以使用 [csv-loader](https://github.com/theplatapi/csv-loader) 和 [xml-loader](https://github.com/gisikw/xml-loader)。让我们处理加载这三类文件：
+此外，可以加载的有用资源还有数据，如 JSON 文件、CSV、TSV 和 XML。与 NodeJS 类似，对 JSON 的支持实际上也是内置的，即 `import Data from './data.json'` 默认将正常运行。可以使用 [csv-loader](https://github.com/theplatapi/csv-loader) 和 [xml-loader](https://github.com/gisikw/xml-loader) 导入 CSV、TSV 与 XML。接下来试试加载这三类文件：
 
 ```bash
 npm install --save-dev csv-loader xml-loader
@@ -478,7 +478,7 @@ Zoe,Bill,Reminder,Buy orange juice
 Autumn,Lindsey,Letter,I miss you
 ```
 
-现在可以 `import` 这四种类型的数据（JSON, CSV, TSV, XML）中的任何一种，所导入的 `Data` 变量，将包含可直接使用的已解析 JSON：
+现在可以导入这四种类型的数据（JSON, CSV, TSV, XML）中的任何一种了，所导入的 `Data` 变量，将包含可直接使用的已解析的 JSON：
 
 **src/index.js**
 
@@ -511,9 +511,9 @@ Autumn,Lindsey,Letter,I miss you
  document.body.appendChild(component());
 ```
 
-重新执行 `npm run build` 命令，然后打开 `dist/index.html`。查看开发者工具中的控制台，应该能够看到导入的数据会被打印出来！
+重新执行 `npm run build` 命令，然后打开 `dist/index.html`。在开发者工具中的控制台应该能够看到成功打印了导入的数据！
 
-T> 在使用 [d3](https://github.com/d3) 等工具实现某些数据可视化时，这个功能极其有用。这将帮助你不用在运行时发送请求获取和解析数据，而是在构建过程中将其提前加载到模块中，以便浏览器加载模块后，可以直接访问解析过的数据。
+T> 在使用 [d3](https://github.com/d3) 等工具实现某些数据可视化时，这个功能极其有用。这将帮助不用在运行时发送请求获取和解析数据，而是在构建过程中将其提前加载到模块中，以便浏览器加载模块后，可以直接访问解析过的数据。
 
 W> 只有在使用 JSON 模块默认导出时会没有警告。
 
@@ -527,9 +527,9 @@ import { foo } from './data.json';
 
 ### 自定义 JSON 模块解析器 $#customize-parser-of-json-modules$
 
-通过使用 [自定义解析器（parser）](/configuration/module/#ruleparserparse) 替代特定的 webpack loader，可以将任何 `toml`、`yaml` 或 `json5` 文件作为 JSON 模块导入。
+通过使用 [自定义解析器](/configuration/module/#ruleparserparse) 替代特定的 webpack loader，可以将任何 `toml`、`yaml` 或 `json5` 文件作为 JSON 模块导入。
 
-假设你在 `src` 文件夹下有 `data.toml`、`data.yaml` 以及 `data.json5` 文件：
+假设 `src` 文件夹下有 `data.toml`、`data.yaml` 以及 `data.json5` 文件：
 
 **src/data.toml**
 
@@ -572,7 +572,7 @@ Likes tater tots and beer.',
 }
 ```
 
-首先安装 `toml`，`yamljs` 和 `json5` 对应的 package：
+首先安装 `toml`，`yamljs` 和 `json5` 对应的包：
 
 ```bash
 npm install toml yamljs json5 --save-dev
@@ -654,14 +654,14 @@ npm install toml yamljs json5 --save-dev
 +import yaml from './data.yaml';
 +import json from './data.json5';
 +
-+console.log(toml.title); // output `TOML Example`
-+console.log(toml.owner.name); // output `Tom Preston-Werner`
++console.log(toml.title); // 输出 `TOML Example`
++console.log(toml.owner.name); // 输出 `Tom Preston-Werner`
 +
-+console.log(yaml.title); // output `YAML Example`
-+console.log(yaml.owner.name); // output `Tom Preston-Werner`
++console.log(yaml.title); // 输出 `YAML Example`
++console.log(yaml.owner.name); // 输出 `Tom Preston-Werner`
 +
-+console.log(json.title); // output `JSON5 Example`
-+console.log(json.owner.name); // output `Tom Preston-Werner`
++console.log(json.title); // 输出 `JSON5 Example`
++console.log(json.owner.name); // 输出 `Tom Preston-Werner`
 
  function component() {
    const element = document.createElement('div');
@@ -685,11 +685,11 @@ npm install toml yamljs json5 --save-dev
  document.body.appendChild(component());
 ```
 
-重新执行 `npm run build` 命令，然后打开 `dist/index.html`。你应该能够看到导入的数据会被打印到控制台上！
+重新执行 `npm run build` 命令，然后打开 `dist/index.html` 就应该能够看到导入的数据会被打印到控制台上！
 
 ## 全局资源 $#global-assets$
 
-上述所有内容中最出色之处在于，以这种方式加载资源，你可以以更直观的方式将模块和资源组合在一起。无需依赖于含有全部资源的 `/assets` 目录，而是将资源与代码组合在一起使用。例如，类似这样的结构会非常有用：
+上述所有内容中最出色之处在于，以这种方式加载资源，可以以更直观的方式将模块和资源组合在一起。无需依赖于含有全部资源的 `/assets` 目录，而是将资源与代码组合在一起使用。例如，类似这样的结构会非常有用：
 
 ```diff
 - |- /assets
@@ -701,13 +701,13 @@ npm install toml yamljs json5 --save-dev
 + |  |  |– img.png
 ```
 
-这种配置方式会使你的代码更具备可移植性，因为现有的集中放置的方式会让紧密耦合所有资源。假如你想在另一个项目中使用 `/my-component`，只需将其复制或移动到 `/components` 目录下。只要你已经安装过全部 **外部依赖** ，并且 **已经在配置中定义过相同的 loader** ，那么项目应该能够良好运行。
+这种配置方式会使代码更具备可移植性，因为现有的集中放置的方式会让紧密耦合所有资源。假如想在另一个项目中使用 `/my-component`，只需将其复制或移动到 `/components` 目录下。只要你已经安装过全部 **外部依赖** ，并且 **已经在配置中定义过相同的 loader** ，那么项目应该能够良好运行。
 
-但是，假如你只能被局限在旧有开发方式，或者你有一些在多个组件（视图、模板、模块等）之间共享的资源。你仍然可以将这些资源存储在一个基本目录中，甚至配合 [alias](/configuration/resolve/#resolvealias) 可以更方便使用 `import` 导入。
+但是，假如只能被局限在旧有开发方式，或者有一些在多个组件（视图、模板、模块等）之间共享的资源，仍然可以将这些资源存储在一个基本目录中，甚至配合 [alias](/configuration/resolve/#resolvealias) 可以更方便使用 `import` 导入。
 
 ## 回退处理 $#wrapping-up$
 
-在下篇指南中，我们无需使用本指南中所有用到的资源，因此我们会进行一些清理工作，以便为下篇指南 [管理输出](/guides/output-management/) 做好准备：
+在下篇指南中无需使用本指南中所有用到的资源，因此需要进行一些清理工作，以便为下篇指南 [管理输出](/guides/output-management/) 做好准备：
 
 **project**
 
@@ -807,14 +807,14 @@ npm install toml yamljs json5 --save-dev
 -import yaml from './data.yaml';
 -import json from './data.json5';
 -
--console.log(toml.title); // output `TOML Example`
--console.log(toml.owner.name); // output `Tom Preston-Werner`
+-console.log(toml.title); // 输出 `TOML Example`
+-console.log(toml.owner.name); // 输出 `Tom Preston-Werner`
 -
--console.log(yaml.title); // output `YAML Example`
--console.log(yaml.owner.name); // output `Tom Preston-Werner`
+-console.log(yaml.title); // 输出 `YAML Example`
+-console.log(yaml.owner.name); // 输出 `Tom Preston-Werner`
 -
--console.log(json.title); //  `JSON5 Example`
--console.log(json.owner.name); // output `Tom Preston-Werner`
+-console.log(json.title); // 输出 `JSON5 Example`
+-console.log(json.owner.name); // 输出 `Tom Preston-Werner`
 
  function component() {
    const element = document.createElement('div');
@@ -850,4 +850,4 @@ npm uninstall css-loader csv-loader json5 style-loader toml xml-loader yamljs
 
 ## 延伸阅读 $#further-reading$
 
-- SurviveJS 中的 [加载字体](https://survivejs.com/webpack/loading/fonts/)。
+- SurviveJS 额外介绍了 [字体加载](https://survivejs.com/webpack/loading/fonts/)。
diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx
index bdf5ed68ef23..f72e383e05bc 100644
--- a/src/content/guides/getting-started.mdx
+++ b/src/content/guides/getting-started.mdx
@@ -27,23 +27,23 @@ contributors:
   - d3lm
   - snitin315
   - Etheryen
-  - Yucohny
 translators:
   - QC-L
   - jacob-lcs
   - conorzhong
   - dear-lizhihua
+  - Yucohny
 ---
 
-webpack 用于编译 JavaScript 模块。一旦完成 [安装](/guides/installation)，你就可以通过 webpack [CLI](/api/cli) 或 [API](/api/node) 与其配合交互。如果你还不熟悉 webpack，请阅读 [核心概念](/concepts) 和 [对比](/comparison)，了解为什么要使用 webpack，而不是社区中的其他工具。
+webpack 用于编译 JavaScript 模块。一旦完成 [安装](/guides/installation) 就可以通过 webpack [CLI](/api/cli) 或 [API](/api/node) 与其配合交互。如果还不熟悉 webpack，请阅读 [核心概念](/concepts) 和 [对比](/comparison) 了解为什么是使用 webpack 而非社区中的其他工具。
 
 W> 运行 webpack 5 的 Node.js 最低版本是 10.13.0（LTS）。
 
 <StackBlitzPreview example="getting-started?terminal=" />
 
-## 基本安装 $#basic-setup$
+## 基础设置 $#basic-setup$
 
-首先我们创建一个目录，初始化 npm，然后 [在本地安装 webpack](/guides/installation#local-installation)，接着安装 [`webpack-cli`](https://github.com/webpack/webpack-cli)（此工具用于在命令行中运行 webpack）：
+首先创建进入一个目录并初始化 npm，然后 [在本地安装 webpack](/guides/installation#local-installation)，接着安装 [`webpack-cli`](https://github.com/webpack/webpack-cli)（此工具用于在命令行中运行 webpack）：
 
 ```bash
 mkdir webpack-demo
@@ -52,15 +52,15 @@ npm init -y
 npm install webpack webpack-cli --save-dev
 ```
 
-在整篇指南中，我们将使用 `diff` 块，来展示对目录、文件和代码所做的修改。例如：
+整篇指南将使用 `diff` 代码块展示对目录、文件和代码所做的修改。例如：
 
 ```diff
-+ this is a new line you shall copy into your code
-- and this is a line to be removed from your code
-  and this is a line not to touch.
++ 这是需要复制到代码的新的一行
+- 这是需要从代码中移除的一行
+  这是不需要调整的一行
 ```
 
-现在，我们将创建以下目录结构、文件和内容：
+现在创建以下目录结构、文件和内容：
 
 **project**
 
@@ -79,7 +79,7 @@ npm install webpack webpack-cli --save-dev
 function component() {
   const element = document.createElement('div');
 
-  // lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
+  // 执行这一行需要引入 lodash（目前通过 script 脚本引入）
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 
   return element;
@@ -104,9 +104,9 @@ document.body.appendChild(component());
 </html>
 ```
 
-我们还需要调整 `package.json` 文件，以便确保我们安装包是 `private`（私有的），并移除 `main` 入口。这可以防止意外发布你的代码。
+还需要调整 `package.json` 文件以确保安装包是私有的，并移除 `main` 入口，这可以防止意外发布代码。
 
-T> 如果你想要了解 `package.json` 内在机制的更多信息，我们推荐阅读 [npm 文档](https://docs.npmjs.com/files/package.json)。
+T> 推荐阅读 [npm 文档](https://docs.npmjs.com/files/package.json) 以了解有关 `package.json` 内在机制的更多信息。
 
 **package.json**
 
@@ -130,19 +130,19 @@ T> 如果你想要了解 `package.json` 内在机制的更多信息，我们推
  }
 ```
 
-在此示例中，`<script>` 标签之间存在隐式依赖关系。在 `index.js` 文件执行之前，还需要在页面中先引入 `lodash`。这是因为 `index.js` 并未显式声明它需要 `lodash`，而是假定推测已经存在一个全局变量 `_`。
+在此示例中，`<script>` 标签之间存在隐式依赖关系。在 `index.js` 文件执行之前，还需要在页面中先引入 `lodash`。`index.js` 并未显式声明需要 `lodash`，而是假定推测已经存在一个全局变量 `_`。
 
-使用这种方式去管理 JavaScript 项目会有一些问题：
+使用这种方式管理 JavaScript 项目存在一些问题：
 
 - 无法直接体现脚本的执行依赖于外部库。
 - 如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
 - 如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。
 
-让我们使用 webpack 来管理这些脚本。
+试试使用 webpack 管理这些脚本。
 
 ## 创建一个 bundle $#creating-a-bundle$
 
-首先，我们稍微调整下目录结构，创建 `./dist` 文件夹用于存放分发代码，而 `./src` 文件夹仍存放源代码。源代码是指用于书写和编辑的代码；分发代码是指在构建过程中，经过最小化和优化后产生的输出结果，最终将在浏览器中加载。调整后目录结构如下：
+首先稍微调整下目录结构，创建 `./dist` 文件夹用于存放分发（distribution）代码，而 `./src` 文件夹仍存放源代码。源代码是指用于书写和编辑的代码；分发代码是指在构建过程中，经过最小化和优化后产生的输出结果，分发代码最终将在浏览器中加载。调整后的目录结构如下：
 
 **project**
 
@@ -157,17 +157,17 @@ T> 如果你想要了解 `package.json` 内在机制的更多信息，我们推
     |- index.js
 ```
 
-T> 你可能会发现，尽管 `index.html` 目前放在 `dist` 目录下，但它是手动创建的。在指南的 [后续章节](/guides/output-management/#setting-up-htmlwebpackplugin) 中，我们会教你如何生成 `index.html` 而非手动编辑它。如此做，便可安全地清空 `dist` 目录并重新生成目录中的所有文件。
+T> 尽管 `index.html` 目前处于 `dist` 目录下，但它是手动创建的。指南的 [后续章节](/guides/output-management/#setting-up-htmlwebpackplugin) 会介绍如何生成 `index.html` 而非手动编辑它。通过这样的方式便可安全地清空 `dist` 目录并重新生成目录中的所有文件。
 
-我们需要在本地安装 `lodash` 依赖，以在 `index.js` 中打包它：
+在本地安装 `lodash` 以在 `index.js` 中打包它：
 
 ```bash
 npm install --save lodash
 ```
 
-T> 安装一个将被打包到生产环境 bundle 的 package 时，应该使用 `npm install --save`；而在安装一个用于开发环境的 package 时（例如，linter、测试库等），应该使用 `npm install --save-dev`。更多信息请查看 [npm 文档](https://docs.npmjs.com/cli/install)。
+T> 安装一个将被打包到生产环境 bundle 的包时，应该使用 `npm install --save`；而安装一个用于开发环境的包时（例如代码检查工具、测试库等），应该使用 `npm install --save-dev`。请查看 [npm 文档](https://docs.npmjs.com/cli/install) 以了解更多相关信息。
 
-现在，在我们的脚本中导入 `lodash`：
+现在在脚本中导入 `lodash`：
 
 **src/index.js**
 
@@ -177,7 +177,7 @@ T> 安装一个将被打包到生产环境 bundle 的 package 时，应该使用
  function component() {
    const element = document.createElement('div');
 
--  // lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
+-  // 执行这一行需要引入 lodash（目前通过 script 脚本引入）
 +  // lodash 现在使用 import 引入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 
@@ -187,7 +187,7 @@ T> 安装一个将被打包到生产环境 bundle 的 package 时，应该使用
  document.body.appendChild(component());
 ```
 
-现在，我们将会打包所有脚本，因此必须更新 `index.html` 文件。由于现在是通过 `import` 引入 lodash，所以应将 lodash `<script>` 删除；然后修改另一个 `<script>` 标签来加载 bundle，而不是原始的 `./src` 文件：
+现在将打包所有脚本，因此需要更新 `index.html` 文件。由于现在是通过 `import` 引入 lodash，所以应将 lodash `<script>` 删除；然后修改另一个 `<script>` 标签来加载 bundle，而不是原始的 `./src` 文件：
 
 **dist/index.html**
 
@@ -206,9 +206,9 @@ T> 安装一个将被打包到生产环境 bundle 的 package 时，应该使用
  </html>
 ```
 
-在这个设置中，`index.js` 显式要求引入的 `lodash` 必须存在，然后将它绑定为 `_`（没有全局作用域污染）。通过声明模块所需的依赖，webpack 能够利用这些信息去构建依赖图，然后使用图生成一个优化过的 bundle，并且会以正确顺序执行。
+在此设置中 `index.js` 显式要求引入的 `lodash` 必须存在，然后将它绑定为 `_`（没有全局作用域污染）。webpack 能够利用模块生命的依赖信息构建依赖图，然后使用图生成一个优化过的 bundle，并能保证以正确顺序执行。
 
-换言之，执行 `npx webpack` 会将我们的脚本 `src/index.js` 作为 [入口起点](/concepts/entry-points)，也会生成 `dist/main.js` 作为 [输出](/concepts/output)。Node 8.2/npm 5.2.0 及以上版本提供的 `npx` 命令，可以运行在最初安装的 webpack package 中的 webpack 二进制文件（即 `./node_modules/.bin/webpack`）：
+换言之，执行 `npx webpack` 会将脚本 `src/index.js` 作为 [入口起点](/concepts/entry-points)，也会生成 `dist/main.js` 作为 [输出](/concepts/output)。Node 8.2/npm 5.2.0 及以上版本提供的 `npx` 命令，可以运行在最初安装的 webpack 包中的 webpack 二进制文件（即 `./node_modules/.bin/webpack`）：
 
 ```bash
 $ npx webpack
@@ -221,21 +221,21 @@ cacheable modules 530 KiB
 webpack 5.4.0 compiled successfully in 1851 ms
 ```
 
-T> 输出可能会稍有不同，但是只要构建成功，那么你就可以放心继续。
+T> 输出可能会稍有不同，但是只要构建成功，那么就可以放心继续。
 
-在浏览器中打开 `dist` 目录下的 `index.html`，如果一切正常，你应该能看到以下文本：`'Hello webpack'`。
+在浏览器中打开 `dist` 目录下的 `index.html`，如果一切正常就能看到以下文本：`'Hello webpack'`。
 
 ## 模块 $#modules$
 
-[ES2015](https://babeljs.io/learn-es2015/) 中的 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 和 [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) 语句已经被标准化。虽然大多数浏览器还无法支持它们，但是 webpack 却能够提供开箱即用般的支持。
+尽管大多数浏览器还无法支持在 [ES2015](https://babeljs.io/learn-es2015/) 中已经标准化的 [`import`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import) 和 [`export`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export)，但 webpack 能够提供开箱即用般的支持。
 
-事实上，webpack 在幕后会将代码 “**转译**”，以便可以在旧版本浏览器中执行。如果你检查 `dist/main.js`，你可以看到 webpack 具体是如何工作的，这是独创精巧的设计！除了 `import` 和 `export`，webpack 还能够很好地支持多种其他模块语法，更多信息请查看 [模块 API](/api/module-methods)。
+事实上，webpack 会将代码转译以便可以在旧版本浏览器中执行。检查 `dist/main.js` 你可以看到 webpack 具体是如何工作的，这是独创精巧的设计！除了 `import` 和 `export`，webpack 还能够很好地支持多种其他模块语法，查看 [模块 API](/api/module-methods) 以了解更多相关信息。
 
-注意，webpack 不会更改代码中除 `import` 和 `export` 语句以外的部分。如果你在使用其它 [ES2015 特性](http://es6-features.org/)，请确保 webpack 的 [loader 系统](/concepts/loaders/) 中使用了像 [Babel](https://babel.docschina.org/) 一样的 [transpiler（转译器）](/loaders/#transpiling)。
+注意，webpack 不会更改代码中除 `import` 和 `export` 语句以外的部分。如果正在使用其它 [ES2015 特性](http://es6-features.org/)，请确保 webpack 的 [loader 系统](/concepts/loaders/) 中使用了像 [Babel](https://babel.docschina.org/) 一样的 [转译器](/loaders/#transpiling)。
 
 ## 使用配置文件 $#using-a-configuration$
 
-在 webpack v4 中，无须任何配置即可运行，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 [配置文件](/concepts/configuration)。这比在 terminal（终端）中手动输入大量命令要更加高效，所以让我们创建一个配置文件：
+webpack v4 无须任何配置即可运行，然而大多数项目会需要很复杂的设置，因此 webpack 仍然支持 [配置文件](/concepts/configuration)，这比在终端中手动输入大量命令更加高效。接下来创建一个 webpack 配置文件：
 
 **project**
 
@@ -277,13 +277,13 @@ cacheable modules 530 KiB
 webpack 5.4.0 compiled successfully in 1934 ms
 ```
 
-T> 如果 `webpack.config.js` 存在，则 `webpack` 命令将默认选择使用它。我们在这里使用 `--config` 选项只是向你表明可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用的。
+T> 如果 `webpack.config.js` 存在，则 `webpack` 命令将默认选择使用它。此处使用 `--config` 选项只是表明可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用的。
 
-比起 CLI 这种简单直接的使用方式，配置文件更加灵活。我们可以在配置文件中指定 loader 规则、插件、resolve 选项，以及许多其他增强功能。更多详细信息请查看 [配置文档](/configuration)。
+比起 CLI 这种简单直接的使用方式，配置文件更加灵活。开发者可以在配置文件中指定 loader 规则、插件、resolve 选项，以及许多其他增强功能。请查看 [配置文档](/configuration) 以了解更多相关信息。
 
 ## npm scripts $#npm-scripts$
 
-考虑到用 CLI 这种方式来运行本地的 webpack 副本并不是特别方便，我们可以设置一个快捷方式。在 **package.json** 文件中添加一个 [npm script](https://docs.npmjs.com/misc/scripts)：
+考虑到使用 CLI 这种方式运行本地 webpack 副本不是特别方便，可以在 package.json 文件中添加 [npm script](https://docs.npmjs.com/misc/scripts) 以设置一个快捷方式：
 
 **package.json**
 
@@ -311,9 +311,9 @@ T> 如果 `webpack.config.js` 存在，则 `webpack` 命令将默认选择使用
  }
 ```
 
-现在，可以使用 `npm run build` 命令替代之前使用的 `npx` 命令。注意，使用 npm `scripts` 便可以像使用 `npx` 那样通过模块名引用本地安装的 npm packages。这是大多数基于 npm 的项目遵循的标准，因为它允许所有贡献者使用同一组通用脚本。
+现在可以使用 `npm run build` 命令替代之前使用的 `npx` 命令。注意，使用 npm `scripts` 便可以像使用 `npx` 那样通过模块名引用本地安装的 npm 包。这是大多数基于 npm 的项目遵循的标准，因为它允许所有贡献者使用同一组通用脚本。
 
-现在运行以下命令，然后看看你的脚本别名是否正常运行：
+运行以下命令看看脚本别名是否正常运行：
 
 ```bash
 $ npm run build
@@ -333,7 +333,7 @@ T> 可以通过在 `npm run build` 命令与参数之间添加两个连接符的
 
 ## 总结 $#conclusion$
 
-现在，你已经有了一个基础构建配置，你可以移至下一指南——[`资源管理`](/guides/asset-management)，以了解如何通过 webpack 管理诸如图像、图标等资源。此刻你的项目目录看起来应该如下：
+现在已经有了一个基础构建配置，可以移至下一指南——[`资源管理`](/guides/asset-management)，以了解如何通过 webpack 管理诸如图像、图标等资源。此刻你的项目目录看起来应该如下：
 
 **project**
 
@@ -350,6 +350,6 @@ webpack-demo
 |- /node_modules
 ```
 
-W> 不要使用 webpack 编译不可信的代码。它可能会在你的计算机，远程服务器或者在你 web 应用程序使用者的浏览器中执行恶意代码。
+W> 不要使用 webpack 编译不可信的代码。它可能会在计算机，远程服务器或者在 web 应用程序使用者的浏览器中执行恶意代码。
 
-如果想要了解 webpack 设计思想，可以查看 [基本概念](/concepts) 和 [配置](/configuration) 页面。此外，你能够在 [API](/api) 章节深入了解 webpack 提供的各种接口。
+如果想要了解 webpack 设计思想，可以查看 [基本概念](/concepts) 和 [配置](/configuration) 页面。此外也能够在 [API](/api) 章节深入了解 webpack 提供的各种接口。
diff --git a/src/content/guides/index.mdx b/src/content/guides/index.mdx
index cd2222faef42..edfe38c39ca4 100644
--- a/src/content/guides/index.mdx
+++ b/src/content/guides/index.mdx
@@ -7,10 +7,11 @@ contributors:
   - benschac
 translators:
   - dear-lizhihua
+  - Yucohny
 ---
 
-指南章节，用于理解和掌握 webpack 提供的各种工具和特性。首先是一个 [快速开始](/guides/getting-started/) 指引。
+指南章节用于理解和掌握 webpack 提供的各种工具和特性。首先是带你 [起步](/guides/getting-started/) 的指引。
 
-指南会逐步带你由浅入深。本章节更多是作为一个切入点，一旦阅读完成后，你就会更加容易深入到实际的 [配置](/configuration) 文档中。
+指南章节会逐步带你由浅入深。本章节更多是作为一个切入点，阅读完成后会更加容易深入 [配置](/configuration) 文档中。
 
-W> 指南中运行 webpack 后显示的输出，可能和新版本的输出略有不同。这是意料之中的事情。只要 bundle 看起来接近，而且运行正常，那就没有问题。如果你遇到在新版本中，示例无法良好运行，请 [创建一个 issue](https://github.com/webpack/webpack.js.org/issues/new/choose)，我们将尽力解决版本差异。
+W> 指南中运行 webpack 后显示的输出可能与新版本的输出略有不同。这是意料之中的事情。只要 bundle 看起来接近并且运行正常那就没有问题。如果遇到在新版本中示例无法良好运行，请 [创建 issue](https://github.com/webpack/webpack.js.org/issues/new/choose)，我们将尽力解决版本差异。
