docs(cn): improve translation and translate the rest

docs(cn): improve translation and translate the rest

Author: Yucohny

src/content/guides/asset-management.mdx

@@ -12,17 +12,17 @@ contributors:
   - wizardofhogwarts
   - astonizer
   - snitin315
-  - Yucohny
 translators:
   - QC-L
   - dear-lizhihua
+  - Yucohny
 ---
 
-如果你是从一开始就沿用指南的示例，现在应该有一个显示 “Hello webpack” 的小项目。接下来我们尝试混合一些像图片的其他资源，看看 webpack 如何处理。
+如果你是从一开始就沿用指南的示例，现在应该有一个显示 “Hello webpack” 的小项目。接下来我们尝试混合一些图像之类的其他资源，看看 webpack 如何处理。
 
-在 webpack 出现之前，前端开发人员会使用 [grunt](https://gruntjs.com/) 和 [gulp](https://gulpjs.com/) 等工具来处理资源，并将它们从 `/src` 文件夹移动到 `/dist` 或 `/build` 目录中。JavaScript 模块也遵循同样的方式，但是，像 webpack 这样的工具将 **动态打包** 所有依赖（创建所谓的 [依赖图（dependency graph）](/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 或内置的 [Asset Modules](/guides/asset-modules/) **引入任何其他类型的文件**。换言之，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了下面这些设置。
 
 ## 设置 $#setup$
 
@@ -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 模块中 `import` CSS 文件，需要安装 [style-loader](/loaders/style-loader) 和 [css-loader](/loaders/css-loader)，并在 [`module` 配置](/configuration/module) 中添加这些 loader：
 
 ```bash
 npm install --save-dev style-loader css-loader
@@ -92,7 +92,7 @@ npm install --save-dev style-loader css-loader
 
 module loader 可以链式调用。链中的每个 loader 都将对资源进行转换，不过链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。
 
-应保证 loader 的先后顺序：[`'style-loader'`](/loaders/style-loader) 在前，而 [`'css-loader'`](/loaders/css-loader) 在后。如果不遵守此约定，webpack 可能会抛出错误。
+请确保 loader 的先后顺序：[`'style-loader'`](/loaders/style-loader) 在前，而 [`'css-loader'`](/loaders/css-loader) 在后。如果不遵守此约定，webpack 可能会抛出错误。
 
 T> webpack 根据正则表达式确定应该查找哪些文件，并将其提供给指定的 loader。在此示例中，所有以 `.css` 结尾的文件，都将被提供给 `style-loader` 和 `css-loader`。
 
@@ -133,7 +133,7 @@ T> webpack 根据正则表达式确定应该查找哪些文件，并将其提供
  function component() {
    const element = document.createElement('div');
 
-   // Lodash, now imported by this script
+   // lodash 现在使用 import 引入。
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 +  element.classList.add('hello');
 
@@ -143,7 +143,7 @@ T> webpack 根据正则表达式确定应该查找哪些文件，并将其提供
  document.body.appendChild(component());
 ```
 
-然后运行 build 命令：
+然后运行构建命令：
 
 ```bash
 $ npm run build
@@ -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` 现在的样式是红色。要查看 webpack 做了什么，请检查页面（不要查看页面源代码，它不会显示结果，因为 `<style>` 标签是由 JavaScript 动态创建的），并查看页面的 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，但是像 background 和 icon 这样的图像应该如何处理呢？在 webpack 5 中，使用内置的 [Asset Modules](/guides/asset-modules/) 便可以轻松地将这些内容混入我们的系统中：
 
 **webpack.config.js**
 
@@ -198,7 +198,7 @@ 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" />`。
 
 试试向项目中添加一个图像，并观察它是如何工作的，你可以使用任何你喜欢的图像：
 
@@ -229,11 +229,11 @@ webpack 5.4.0 compiled successfully in 2231 ms
  function component() {
    const element = document.createElement('div');
 
-   // Lodash, now imported by this script
+   // lodash 现在使用 import 引入。
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
 
-+  // 将图像添加到我们已经存在的 div 中。
++  // 将图像添加到已经存在的 div 中。
 +  const myIcon = new Image();
 +  myIcon.src = Icon;
 +
@@ -279,7 +279,7 @@ cacheable modules 540 KiB (javascript) 9.88 KiB (asset)
 webpack 5.4.0 compiled successfully in 1972 ms
 ```
 
-如果一切顺利，你现在应该看到你的 icon 图标成为了重复的背景图，并且 `Hello webpack` 文本旁边出现了 `img` 元素。如果检查此元素，你将看到实际的文件名已更改为像 `29822eaa871e8eadeaa4.png` 一样的名称。这意味着 webpack 在 `src` 文件夹中找到了我们的文件，并对其进行了处理！
+如果一切顺利，现在应该看到图标成为了重复的背景图，并且 `Hello webpack` 文本旁边出现了 `img` 元素。如果检查此元素，你将看到实际的文件名已更改为像 `29822eaa871e8eadeaa4.png` 一样的名称。这意味着 webpack 在 `src` 文件夹中找到了我们的文件，并对其进行了处理！
 
 ## 加载字体 $#loading-fonts$
 
@@ -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**
 
@@ -356,7 +356,7 @@ webpack 5.4.0 compiled successfully in 1972 ms
  }
 ```
 
-现在，让我们重新构建，看看 webpack 是否处理了我们的字体：
+现在重新构建试试，看看 webpack 是否处理了字体：
 
 ```bash
 $ npm run build
@@ -390,7 +390,7 @@ webpack 5.4.0 compiled successfully in 2142 ms
 
 ## 加载数据 $#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、TSV 和 XML，你可以使用 [csv-loader](https://github.com/theplatapi/csv-loader) 和 [xml-loader](https://github.com/gisikw/xml-loader)。让我们处理加载这三类文件：
 
 ```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：
+现在可以 `import` 这四种类型的数据（JSON, CSV, TSV, XML）中的任何一种，所导入的 `Data` 变量，将包含可直接使用的已解析 JSON：
 
 **src/index.js**
 
@@ -492,11 +492,11 @@ Autumn,Lindsey,Letter,I miss you
  function component() {
    const element = document.createElement('div');
 
-   // Lodash, now imported by this script
+   // lodash 现在使用 import 引入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
 
-   // Add the image to our existing div.
+   // 将图像添加到已经存在的 div 中。
    const myIcon = new Image();
    myIcon.src = Icon;
 
@@ -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) 等工具实现某些数据可视化时，这个功能极其有用。可以不用在运行时再去发送一个 ajax 请求获取和解析数据，而是在构建过程中将其提前加载到模块中，以便浏览器加载模块后，可以直接访问解析过的数据。
+T> 在使用 [d3](https://github.com/d3) 等工具实现某些数据可视化时，这个功能极其有用。这将帮助你不用在运行时发送请求获取和解析数据，而是在构建过程中将其提前加载到模块中，以便浏览器加载模块后，可以直接访问解析过的数据。
 
 W> 只有在使用 JSON 模块默认导出时会没有警告。
 
@@ -666,11 +666,11 @@ npm install toml yamljs json5 --save-dev
  function component() {
    const element = document.createElement('div');
 
-   // Lodash, now imported by this script
+   // lodash 现在使用 import 引入。
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
 
-   // Add the image to our existing div.
+   // 将图像添加到已经存在的 div 中。
    const myIcon = new Image();
    myIcon.src = Icon;
 
@@ -819,11 +819,11 @@ npm install toml yamljs json5 --save-dev
  function component() {
    const element = document.createElement('div');
 
--  // lodash，现在通过 script 标签导入
+-  // lodash 现在使用 import 引入。
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 -  element.classList.add('hello');
 -
--  // Add the image to our existing div.
+-  // 将图像添加到已经存在的 div 中。
 -  const myIcon = new Image();
 -  myIcon.src = Icon;
 -
@@ -838,15 +838,15 @@ npm install toml yamljs json5 --save-dev
  document.body.appendChild(component());
 ```
 
-And remove those dependencies we added before:
+并移除之前添加的依赖：
 
 ```bash
 npm uninstall css-loader csv-loader json5 style-loader toml xml-loader yamljs
 ```
 
 ## 下篇指南 $#next-guide$
 
-我们继续移步到 [管理输出](/guides/output-management/)
+我们将继续移步到 [管理输出](/guides/output-management/)。
 
 ## 延伸阅读 $#further-reading$