docs(cn): improve the translations of guides/hmr (#1861)

Author: Yucohny

src/content/api/loaders.mdx

@@ -350,7 +350,7 @@ resolve(context: string, request: string): Promise<string>
 
 ### this.hot $#thishot$
 
-loaders 的 HMR（热模块替换）相关信息。
+loaders 的 HMR（模块热替换）相关信息。
 
 ```javascript
 module.exports = function (source) {

src/content/configuration/dev-server.mdx

@@ -228,7 +228,7 @@ module.exports = {
 
 `'log' | 'info' | 'warn' | 'error' | 'none' | 'verbose'`
 
-允许在浏览器中设置日志级别，例如在重载之前，在一个错误之前或者 [热模块替换](/concepts/hot-module-replacement/) 启用时。
+允许在浏览器中设置日志级别，例如在重载之前，在一个错误之前或者 [模块热替换](/concepts/hot-module-replacement/) 启用时。
 
 **webpack.config.js**
 
@@ -889,7 +889,7 @@ npx webpack serve --host local-ipv6
 
 `'only'` `boolean = true`
 
-启用 webpack 的 [热模块替换](/concepts/hot-module-replacement/) 特性：
+启用 webpack 的 [模块热替换](/concepts/hot-module-replacement/) 特性：
 
 **webpack.config.js**
 
@@ -914,7 +914,7 @@ npx webpack serve --hot
 npx webpack serve --no-hot
 ```
 
-启用热模块替换功能，在构建失败时不刷新页面作为回退，使用 `hot: 'only'`：
+启用模块热替换功能，在构建失败时不刷新页面作为回退，使用 `hot: 'only'`：
 
 **webpack.config.js**
 

src/content/guides/development.mdx

@@ -280,13 +280,13 @@ W> `webpack-dev-server` 在编译之后不会写入任何输出文件，而是
 
 `webpack-dev-server` 具有许多可配置的选项。参阅 [配置文档](/configuration/dev-server) 以了解更多配置选项。
 
-T> 现在 server 正在运行，也许你想试试 [热模块替换](/guides/hot-module-replacement)！
+T> 现在 server 正在运行，也许你想试试 [模块热替换](/guides/hot-module-replacement)！
 
 ### 使用 webpack-dev-middleware $#using-webpack-dev-middleware$
 
 `webpack-dev-middleware` 是一个包装器，它可以把 webpack 处理过的文件发送到 server。这是 `webpack-dev-server` 内部的原理，但是它也可以作为一个单独的包使用，以便根据需求进行更多自定义设置。下面是一个 `webpack-dev-middleware` 配合 `express` server 的示例。
 
-首先，安装 `express` 和 `webpack-dev-middleware`：
+首先，安装 `express` 和  `webpack-dev-middleware`：
 
 ```bash
 npm install --save-dev express webpack-dev-middleware
@@ -424,7 +424,7 @@ Example app listening on port 3000!
 
 打开浏览器，访问 `http://localhost:3000`，应该看到 webpack 应用程序已经运行！
 
-T> 参阅 [热模块替换](/guides/hot-module-replacement/) 指南了解更多关于热模块替换的运行机制。
+T> 参阅 [模块热替换](/guides/hot-module-replacement/) 指南了解更多关于模块热替换的运行机制。
 
 ## 调整文本编辑器 $#adjusting-your-text-editor$
 

src/content/guides/hot-module-replacement.mdx

@@ -25,6 +25,7 @@ translators:
   - QC-L
   - jacob-lcs
   - lcxfs1991
+  - Yucohny
 related:
   - title: 概念 - 模块热替换
     url: /concepts/hot-module-replacement
@@ -34,20 +35,20 @@ related:
 
 T> 本指南继续沿用 [开发环境](/guides/development) 指南中的代码示例。
 
-模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新。本页面重点介绍其**实现**，而 [概念](/concepts/hot-module-replacement) 页面提供了更多关于它的工作原理以及为什么它有用的细节。
+模块热替换（HMR）是 webpack 提供的最有用的功能之一。它能帮助在运行时不完全刷新页面的情况下更新所有类型的模块。本页面重点介绍 **如何使用**，而 [概念](/concepts/hot-module-replacement) 页面提供了更多关于它的工作原理以及为什么它有用的细节。
 
-W> **HMR** 不适用于生产环境，这意味着它应当用于开发环境。更多详细信息，
-请查看 [生产环境](/guides/production) 指南。
+W> **HMR** 不适用于生产环境，而应当用于开发环境。
+参阅 [生产环境](/guides/production) 指南以了解更多详细信息。
 
 ## 启用 HMR $#enabling-hmr$
 
 此功能可以很大程度提高生产效率。我们要做的就是更新 [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 配置，
 然后使用 webpack 内置的 HMR 插件。我们还要删除掉 `print.js` 的入口起点，
 因为现在已经在 `index.js` 模块中引用了它。
 
-从 `webpack-dev-server` v4.0.0 开始，热模块替换是默认开启的。
+从 `webpack-dev-server` v4.0.0 开始，模块热替换是默认开启的。
 
-T> 如果你在技术选型中使用了 `webpack-dev-middleware` 而没有使用 `webpack-dev-server`，请使用 [`webpack-hot-middleware`](https://github.com/webpack-contrib/webpack-hot-middleware) 依赖包，以在你的自定义服务器或应用程序上启用 HMR。
+T> 如果在技术选型中使用的是 `webpack-dev-middleware` 而非 `webpack-dev-server`，请使用 [`webpack-hot-middleware`](https://github.com/webpack-contrib/webpack-hot-middleware) 依赖以在自定义服务器或应用程序上启用 HMR。
 
 **webpack.config.js**
 
@@ -78,7 +79,7 @@ T> 如果你在技术选型中使用了 `webpack-dev-middleware` 而没有使用
   };
 ```
 
-你也可以为 HMR 提供入口：
+也可以为 HMR 提供入口起点：
 
 **webpack.config.js**
 
@@ -91,23 +92,23 @@ T> 如果你在技术选型中使用了 `webpack-dev-middleware` 而没有使用
     entry: {
        app: './src/index.js',
 -      print: './src/print.js',
-+      // Runtime code for hot module replacement
++      // 模块热替换的运行时代码
 +      hot: 'webpack/hot/dev-server.js',
-+      // Dev server client for web socket transport, hot and live reload logic
++      // 用于 web 套接字传输、热重载逻辑的 web server 客户端
 +      client: 'webpack-dev-server/client/index.js?hot=true&live-reload=true',
     },
     devtool: 'inline-source-map',
     devServer: {
       static: './dist',
-+     // Dev server client for web socket transport, hot and live reload logic
++     // 用于 web 套接字传输、热重载逻辑的 web server 客户端
 +     hot: false,
 +     client: false,
     },
     plugins: [
       new HtmlWebpackPlugin({
         title: 'Hot Module Replacement',
       }),
-+     // Plugin for hot module replacement
++     // 模块热替换的插件
 +     new webpack.HotModuleReplacementPlugin(),
     ],
     output: {
@@ -118,9 +119,9 @@ T> 如果你在技术选型中使用了 `webpack-dev-middleware` 而没有使用
   };
 ```
 
-T> 你可以通过以下命令来修改 [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 的配置：`webpack serve --hot-only`。
+T> 可以通过以下命令修改 [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 的配置：`webpack serve --hot-only`。
 
-现在，我们来修改 `index.js` 文件，以便当 `print.js` 内部发生变更时可以告诉 webpack 接受更新的模块。
+现在修改 `index.js` 文件，以便检测到 `print.js` 内部发生更改时告诉 webpack 接受更新的模块。
 
 **index.js**
 
@@ -159,8 +160,8 @@ T> 你可以通过以下命令来修改 [webpack-dev-server](https://github.com/
 
 ```diff
   export default function printMe() {
--   console.log('I get called from print.js!');
-+   console.log('Updating print.js...');
+-   console.log('我在 print.js 中被调用了！');
++   console.log('正在更新 print.js……');
   }
 ```
 
@@ -173,12 +174,12 @@ main.js:4395 [WDS] Hot Module Replacement enabled.
 + main.js:4395 [WDS] App hot update...
 + main.js:4330 [HMR] Checking for updates on the server...
 + main.js:10024 Accepting the updated printMe module!
-+ 0.4b8ee77….hot-update.js:10 Updating print.js...
++ 0.4b8ee77….hot-update.js:10 正在更新 print.js……
 + main.js:4330 [HMR] Updated modules:
 + main.js:4330 [HMR]  - 20
 ```
 
-## 通过 Node.js API $#via-the-nodejs-api$
+## 通过 Node.js API 启用 HMR $#via-the-nodejs-api$
 
 在 Node.js API 中使用 webpack dev server 时，不要将 dev server 选项放在 webpack 配置对象中。而是在创建时，
 将其作为第二个参数传递。例如：
@@ -199,16 +200,16 @@ const webpackDevServer = require('webpack-dev-server');
 const config = {
   mode: 'development',
   entry: [
-    // Runtime code for hot module replacement
+    // 模块热替换的运行时代码
     'webpack/hot/dev-server.js',
-    // Dev server client for web socket transport, hot and live reload logic
+    // 用于 web 套接字传输、热重载逻辑的 web server 客户端
     'webpack-dev-server/client/index.js?hot=true&live-reload=true',
-    // Your entry
+    // 你的入口起点
     './src/index.js',
   ],
   devtool: 'inline-source-map',
   plugins: [
-    // Plugin for hot module replacement
+    // 模块热替换的插件
     new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
       title: 'Hot Module Replacement',
@@ -222,23 +223,23 @@ const config = {
 };
 const compiler = webpack(config);
 
-// `hot` and `client` options are disabled because we added them manually
+// 由于手动添加了 `hot` 与 `client` 参数，其将被禁用
 const server = new webpackDevServer({ hot: false, client: false }, compiler);
 
 (async () => {
   await server.start();
-  console.log('dev server is running');
+  console.log('dev server 正在运行');
 })();
 ```
 
-查看 [`webpack-dev-server` 的 Node.js API 的完整文档]。
+参阅 [`webpack-dev-server` 的 Node.js API 的完整文档](/api/webpack-dev-server/) 以了解更多。
 
-T> 如果你正在使用 [`webpack-dev-middleware`](/guides/development#using-webpack-dev-middleware)，可以通过 [`webpack-hot-middleware`](https://github.com/webpack-contrib/webpack-hot-middleware) 依赖包，在自定义 dev server 中启用 HMR。
+T> 如果正在使用 [`webpack-dev-middleware`](/guides/development#using-webpack-dev-middleware)，可以通过 [`webpack-hot-middleware`](https://github.com/webpack-contrib/webpack-hot-middleware) 依赖在自定义 dev server 中启用 HMR。
 
 ## 问题 $#gotchas$
 
-模块热替换可能比较难以掌握。为了说明这一点，我们回到刚才的示例中。如果你继续点击示例页面上的按钮，
-你会发现控制台仍在打印旧的 `printMe` 函数。
+模块热替换可能比较难以掌握。为了说明这一点，我们回到刚才的示例中。如果继续点击示例页面上的按钮
+会发现控制台仍在打印旧的 `printMe` 函数。
 
 这是因为按钮的 `onclick` 事件处理函数仍然绑定在旧的 `printMe` 函数上。
 
@@ -257,7 +258,7 @@ T> 如果你正在使用 [`webpack-dev-middleware`](/guides/development#using-we
     element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 
     btn.innerHTML = 'Click me and check the console!';
-    btn.onclick = printMe;  // onclick event is bind to the original printMe function
+    btn.onclick = printMe;  // onclick 事件仍然绑定着原本的 printMe 函数
 
     element.appendChild(btn);
 
@@ -270,7 +271,7 @@ T> 如果你正在使用 [`webpack-dev-middleware`](/guides/development#using-we
 
   if (module.hot) {
     module.hot.accept('./print.js', function() {
-      console.log('Accepting the updated printMe module!');
+      console.log('正在接受更新后的 printMe 模块！');
 -     printMe();
 +     document.body.removeChild(element);
 +     element = component(); // 重新渲染 "component"，以便更新 click 事件处理函数
@@ -284,7 +285,7 @@ T> 如果你正在使用 [`webpack-dev-middleware`](/guides/development#using-we
 
 ## HMR 加载样式 $#hmr-with-stylesheets$
 
-借助于 `style-loader`，使用模块热替换来加载 CSS 实际上极其简单。此 loader 在幕后使用了 `module.hot.accept`，在 CSS 依赖模块更新之后，会将其 patch(修补) 到 `<style>` 标签中。
+借助 `style-loader` 后，使用模块热替换加载 CSS 实际上极其简单。此 loader 在幕后使用了 `module.hot.accept`，在 CSS 依赖模块更新之后，会将其修补到 `<style>` 标签中。
 
 首先使用以下命令安装两个 loader ：
 
@@ -368,7 +369,7 @@ body {
     element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 
     btn.innerHTML = 'Click me and check the console!';
-    btn.onclick = printMe;  // onclick event is bind to the original printMe function
+    btn.onclick = printMe;  // onclick 事件仍然绑定着原本的 printMe 函数
 
     element.appendChild(btn);
 
@@ -380,9 +381,9 @@ body {
 
   if (module.hot) {
     module.hot.accept('./print.js', function() {
-      console.log('Accepting the updated printMe module!');
+      console.log('正在接受更新后的 printMe 模块！');
       document.body.removeChild(element);
-      element = component(); // Re-render the "component" to update the click handler
+      element = component(); // 重新渲染 component 以更新点击事件处理程序
       document.body.appendChild(element);
     })
   }
@@ -404,10 +405,10 @@ body {
 
 社区还提供许多其他 loader 和示例，可以使 HMR 与各种框架和库平滑地进行交互……
 
-- [React Hot Loader](https://github.com/gaearon/react-hot-loader): 实时调整 react 组件。
-- [Vue Loader](https://github.com/vuejs/vue-loader): 此 loader 支持 vue 组件的 HMR，提供开箱即用体验。
-- [Elm Hot webpack Loader](https://github.com/klazuka/elm-hot-webpack-loader): 支持 Elm 编程语言的 HMR。
-- [Angular HMR](https://github.com/gdi2290/angular-hmr): 没有必要使用 loader！直接修改 NgModule 主文件就够了，它可以完全控制 HMR API。
-- [Svelte Loader](https://github.com/sveltejs/svelte-loader): 此 loader 开箱即用地支持 Svelte 组件的热更新。
+- [React Hot Loader](https://github.com/gaearon/react-hot-loader)：实时调整 react 组件。
+- [Vue Loader](https://github.com/vuejs/vue-loader)：此 loader 支持 vue 组件的 HMR，提供开箱即用体验。
+- [Elm Hot webpack Loader](https://github.com/klazuka/elm-hot-webpack-loader)：支持 Elm 编程语言的 HMR。
+- [Angular HMR](https://github.com/gdi2290/angular-hmr)：没有必要使用 loader！直接修改 NgModule 主文件就够了，它可以完全控制 HMR API。
+- [Svelte Loader](https://github.com/sveltejs/svelte-loader)：此 loader 开箱即用地支持 Svelte 组件的热更新。
 
-T> 如果你知道任何其他 loader 或 plugin，能够有助于或增强模块热替换(hot module replacement)，请提交一个 pull request 以添加到此列表中！
+T> 如果你知道任何其他 loader 或 plugin，能够有助于或增强模块热替换，请提交一个 pull request 以添加到此列表中！

src/content/guides/production.mdx

@@ -35,7 +35,7 @@ T> 以下示例来源于 [tree shaking](/guides/tree-shaking) 和 [开发环境]
 
 ## 配置 $#setup$
 
-**development(开发环境)** 和 **production(生产环境)** 这两个环境下的构建目标存在着巨大差异。在**开发环境**中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。而**生产环境**目标则转移至其他方面，关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写**彼此独立的 webpack 配置**。
+**development(开发环境)** 和 **production(生产环境)** 这两个环境下的构建目标存在着巨大差异。在**开发环境**中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(模块热替换) 能力的 localhost server。而**生产环境**目标则转移至其他方面，关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写**彼此独立的 webpack 配置**。
 
 虽然，以上我们将 _生产环境_ 和 _开发环境_ 做了细微区分，但是，请注意，我们还是会遵循不重复原则(Don't repeat yourself - DRY)，保留一个 "common(通用)" 配置。为了将这些配置合并在一起，我们将使用一个名为 [`webpack-merge`](https://github.com/survivejs/webpack-merge) 的工具。此工具会引用 "common" 配置，因此我们不必再在环境特定(environment-specific)的配置中编写重复代码。