docs(cn): improve translation and adjust format

docs(cn): improve translation and adjust format

Author: Yucohny

src/content/guides/output-management.mdx

@@ -10,6 +10,7 @@ contributors:
   - AnayaDesign
   - chenxsan
   - snitin315
+  - Yucohny
 translators:
   - QC-L
   - jacob-lcs
@@ -18,7 +19,7 @@ translators:
 
 T> 本指南继续沿用 [`管理资源`](/guides/asset-management) 指南中的代码示例。
 
-到目前为止，我们都是在 `index.html` 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始 [在文件名中使用 hash](/guides/caching) 并输出 [多个 bundle](/guides/code-splitting)，如果继续手动管理 `index.html` 文件，就会变得困难起来。然而，通过一些插件可以使这个过程更容易管控。
+到目前为止，我们都是在 `index.html` 文件中手动引入所有资源，然而随着应用程序的不断增长，一旦开始 [使用哈希值进行文件命名](/guides/caching) 并输出 [多个 bundle](/guides/code-splitting)，手动管理 `index.html` 文件将变得困难。然而，使用一些插件可以让这个过程更容易管理。
 
 ## 预先准备 $#preparation$
 
@@ -73,7 +74,7 @@ export default function printMe() {
  document.body.appendChild(component());
 ```
 
-还要更新 `dist/index.html` 文件，来为 webpack 分离入口做好准备：
+还要更新 `dist/index.html` 文件，为 webpack 分离入口文件做好准备：
 
 **dist/index.html**
 
@@ -93,7 +94,7 @@ export default function printMe() {
  </html>
 ```
 
-现在调整配置。我们将在 entry 添加 `src/print.js` 作为新的入口起点（`print`），然后修改 output，以便根据入口起点定义的名称，动态地产生 bundle 名称：
+接下来调整配置。我们将在 entry 添加 `src/print.js` 作为新的入口起点（`print`），然后修改 output，使得根据入口起点定义的名称，动态生成 bundle 名称：
 
 **webpack.config.js**
 
@@ -114,7 +115,7 @@ export default function printMe() {
  };
 ```
 
-执行 `npm run build`，然后看到生成如下：
+执行 `npm run build`，然后看到输出如下：
 
 ```bash
 ...
@@ -129,9 +130,9 @@ cacheable modules 530 KiB
 webpack 5.4.0 compiled successfully in 1996 ms
 ```
 
-我们可以看到，webpack 生成 `print.bundle.js` 和 `index.bundle.js` 文件，这也和我们在 `index.html` 文件中指定的文件名称相对应。如果你在浏览器中打开 `index.html`，就可以看到在点击按钮时会发生什么。
+可以看到，webpack 将会生成 `print.bundle.js` 和 `index.bundle.js` 文件，这也和我们在 `index.html` 文件中指定的文件名称相对应。试试在浏览器中打开 `index.html`，看看点击按钮时会发生什么。
 
-但是，如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的入口，会发生什么？会在构建时重新命名生成的 bundle，但是我们的 `index.html` 文件仍然引用旧的名称。让我们用 [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin) 来解决这个问题。
+但是，如果更改入口起点的名称，或者添加一个新的入口，那么会在构建时重新命名生成的 bundle，但是 `index.html` 仍然在引用旧的名称！我们可以使用 [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin) 来解决这个问题。
 
 ## 设置 HtmlWebpackPlugin $#setting-up-htmlwebpackplugin$
 
@@ -164,7 +165,7 @@ npm install --save-dev html-webpack-plugin
  };
 ```
 
-在我们构建之前，你应该了解，虽然在 `dist/` 文件夹我们已经有了 `index.html` 这个文件，然而 `HtmlWebpackPlugin` 还是会默认生成它自己的 `index.html` 文件。也就是说，它会用新生成的 `index.html` 文件，替换我们的原有文件。我们看下执行 `npm run build` 后会发生什么：
+在执行构建之前，你应该了解，虽然在 `dist/` 文件夹我们已经有了 `index.html` 这个文件，但是 `HtmlWebpackPlugin` 还是会默认生成它自己的 `index.html` 文件。换言之，它会用新生成的 `index.html` 文件，替换原有文件。看看执行 `npm run build` 后会发生什么：
 
 ```bash
 ...
@@ -180,15 +181,15 @@ cacheable modules 530 KiB
 webpack 5.4.0 compiled successfully in 2189 ms
 ```
 
-如果在代码编辑器中打开 `index.html`，你会看到 `HtmlWebpackPlugin` 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。
+如果在代码编辑器中打开 `index.html`，会看到 `HtmlWebpackPlugin` 创建了一个全新的文件，所有的 bundle 都自动添加到其中。
 
-如果你想要了解 `HtmlWebpackPlugin` 插件提供的全部的功能和选项，你就应该阅读 [`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) 仓库中的源码。
+如果想要了解 `HtmlWebpackPlugin` 插件提供的全部的功能和选项，请阅读 [`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) 仓库中的源码。
 
 ## 清理 `/dist` 文件夹 $#cleaning-up-the-dist-folder$
 
-你可能已经注意到，由于遗留了之前的指南和代码示例，我们的 `/dist` 文件夹显得相当杂乱。webpack 将生成文件并放置在 `/dist` 文件夹中，但是它不会追踪哪些文件是实际在项目中用到的。
+你可能已经注意到，由于遗留了之前的指南的代码示例，`/dist` 文件夹显得相当杂乱。webpack 将生成文件并放置在 `/dist` 文件夹中，但是它不会追踪哪些文件是实际在项目中用到的。
 
-通常比较推荐的做法是，在每次构建前清理 `/dist` 文件夹，这样只会生成用到的文件。让我们使用 [`output.clean`](/configuration/output/#outputclean) 配置项实现这个需求。
+通常比较推荐的做法是，在每次构建前清理 `/dist` 文件夹，这样只会生成用到的文件。可以使用 [`output.clean`](/configuration/output/#outputclean) 配置项实现这个需求。
 
 **webpack.config.js**
 
@@ -214,16 +215,16 @@ webpack 5.4.0 compiled successfully in 2189 ms
  };
 ```
 
-现在，执行 `npm run build`，检查 `/dist` 文件夹。如果一切顺利，现在只会看到构建后生成的文件，而没有旧文件！
+现在，执行 `npm run build` 后检查 `/dist` 文件夹。如果一切顺利，现在只会看到构建后生成的文件，而没有旧文件！
 
 ## manifest $#the-manifest$
 
-你可能会很感兴趣，webpack 和 webpack 插件似乎“知道”应该生成哪些文件。答案是，webpack 通过 manifest，可以追踪所有模块到输出 bundle 之间的映射。如果你想要知道如何以其他方式来控制 webpack [`输出`](/configuration/output)，了解 manifest 是个好的开始。
+你可能会很感兴趣，webpack 和 webpack 插件似乎“知道”应该生成哪些文件 —— webpack 通过 manifest 追踪所有模块到输出 bundle 之间的映射。如果你想要知道如何以其他方式来控制 webpack [`输出`](/configuration/output)，了解 manifest 是个好的开始。
 
-通过 [`WebpackManifestPlugin`](https://github.com/shellscape/webpack-manifest-plugin) 插件，可以将 manifest 数据提取为一个 json 文件以供使用。
+[`WebpackManifestPlugin`](https://github.com/shellscape/webpack-manifest-plugin) 插件可以将 manifest 数据提取为一个 json 文件以供使用。
 
-我们不会在此展示一个如何在项目中使用此插件的完整示例，你可以在 [manifest](/concepts/manifest) 概念页面深入阅读，以及在 [缓存](/guides/caching) 指南中，了解它与长效缓存有何关系。
+我们不会在此展示如何在项目中使用此插件，你可以在 [manifest](/concepts/manifest) 概念页面深入阅读，以及在 [缓存](/guides/caching) 指南中了解它与长效缓存有何关系。
 
-## 结论 $#conclusion$
+## 总结 $#conclusion$
 
 现在，你已经了解如何向 HTML 动态添加 bundle，让我们深入 [开发环境](/guides/development) 指南。或者如果你想要深入更多相关高级话题，我们推荐你前往 [代码分离](/guides/code-splitting) 指南。