docs(cn): translate src/content/configuration/devtool.md

src/content/configuration/devtool.md

@@ -10,123 +10,123 @@ contributors:
   - wizardofhogwarts
   - anikethsaha
 related:
-  - title: Enabling Source Maps
+  - title: 启用 Source Maps
     url: https://survivejs.com/webpack/developing-with-webpack/enabling-sourcemaps/
-  - title: webpack's Devtool Source Map
+  - title: webpack 的 Devtool Source Map
     url: http://cheng.logdown.com/posts/2016/03/25/679045
 ---
 
-This option controls if and how source maps are generated.
+此选项控制是否生成，以及如何生成 source map。
 
-Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) for a more fine grained configuration. See the [`source-map-loader`](/loaders/source-map-loader) to deal with existing source maps.
+使用 [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) 进行更细粒度的配置。查看 [`source-map-loader`](/loaders/source-map-loader) 来处理已有的 source map。
 
 
 ## `devtool`
 
 `string` `false`
 
-Choose a style of [source mapping](http://blog.teamtreehouse.com/introduction-source-maps) to enhance the debugging process. These values can affect build and rebuild speed dramatically.
+选择一种 [source map](http://blog.teamtreehouse.com/introduction-source-maps) 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。
 
-T> The webpack repository contains an [example showing the effect of all `devtool` variants](https://github.com/webpack/webpack/tree/master/examples/source-map). Those examples will likely help you to understand the differences.
+T> webpack 仓库中包含一个 [显示所有 `devtool` 变体效果的示例](https://github.com/webpack/webpack/tree/master/examples/source-map)。这些例子或许会有助于你理解这些差异之处。
 
-T> Instead of using the `devtool` option you can also use `SourceMapDevToolPlugin`/`EvalSourceMapDevToolPlugin` directly as it has more options. Never use both the `devtool` option and plugin together. The `devtool` option adds the plugin internally so you would end up with the plugin applied twice.
+T> 你可以直接使用 `SourceMapDevToolPlugin`/`EvalSourceMapDevToolPlugin` 来替代使用 `devtool` 选项，因为它有更多的选项。切勿同时使用 `devtool` 选项和 `SourceMapDevToolPlugin`/`EvalSourceMapDevToolPlugin` 插件。`devtool` 选项在内部添加过这些插件，所以你最终将应用两次插件。
 
-devtool                                  | build   | rebuild | production | quality
+devtool                                  | 构建速度 | 重新构建速度 | 生产环境 | 品质(quality)
 ---------------------------------------- | ------- | ------- | ---------- | -----------------------------
-(none)                                   | fastest | fastest | yes        | bundled code
-eval                                     | fastest | fastest | no         | generated code
-eval-cheap-source-map                    | fast    | faster  | no         | transformed code (lines only)
-eval-cheap-module-source-map             | slow    | faster  | no         | original source (lines only)
-eval-source-map                          | slowest | fast    | no         | original source
+(none)                                   | 非常快速 | 非常快速  | yes        | 打包后的代码
+eval                                     | 非常快速 | 非常快速  | no         | 生成后的代码
+eval-cheap-source-map                    | 比较快   | 快速     | no         | 转换过的代码（仅限行）
+eval-cheap-module-source-map             | 中等     | 快速     | no         | 原始源代码（仅限行）
+eval-source-map                          | 慢      | 比较快   | no         | 原始源代码
 eval-nosources-source-map                |         |         |            |
 eval-nosources-cheap-source-map          |         |         |            |
 eval-nosources-cheap-module-source-map   |         |         |            |
-cheap-source-map                         | fast    | slow    | yes        | transformed code (lines only)
-cheap-module-source-map                  | slow    | slower  | yes        | original source (lines only)
-inline-cheap-source-map                  | fast    | slow    | no         | transformed code (lines only)
-inline-cheap-module-source-map           | slow    | slower  | no         | original source (lines only)
-inline-source-map                        | slowest | slowest | no         | original source
+cheap-source-map                         | 比较快   | 中等     | yes        | 转换过的代码（仅限行）
+cheap-module-source-map                  | 中等     | 比较慢   | yes        | 原始源代码（仅限行）
+inline-cheap-source-map                  | 比较快   | 中等     | no         | 转换过的代码（仅限行）
+inline-cheap-module-source-map           | 中等     | 比较慢   | no         | 原始源代码（仅限行）
+inline-source-map                        | 慢      | 慢       | no         | 原始源代码
 inline-nosources-source-map              |         |         |            |
 inline-nosources-cheap-source-map        |         |         |            |
 inline-nosources-cheap-module-source-map |         |         |            |
-source-map                               | slowest | slowest | yes        | original source
-hidden-source-map                        | slowest | slowest | yes        | original source
+source-map                               | 慢      | 慢       | yes        | 原始源代码
+hidden-source-map                        | 慢      | 慢       | yes        | 原始源代码
 hidden-nosources-source-map              |         |         |            |
 hidden-nosources-cheap-source-map        |         |         |            |
 hidden-nosources-cheap-module-source-map |         |         |            |
 hidden-cheap-source-map                  |         |         |            |
 hidden-cheap-module-source-map           |         |         |            |
-nosources-source-map                     | slowest | slowest | yes        | without source content
+nosources-source-map                     | 慢      | 慢       | yes        | 无源代码内容
 nosources-cheap-source-map               |         |         |            |
 nosources-cheap-module-source-map        |         |         |            |
 
-T> We expect a certain pattern when validate devtool name, pay attention and dont mix up the sequence of devtool string. The pattern is: `[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map`.
+T> 验证 devtool 名称时， 我们期望使用某种模式， 注意不要混淆 devtool 字符串的顺序， 模式是： `[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map`.
 
-Some of these values are suited for development and some for production. For development you typically want fast Source Maps at the cost of bundle size, but for production you want separate Source Maps that are accurate and support minimizing.
+其中一些值适用于开发环境，一些适用于生产环境。对于开发环境，通常希望更快速的 source map，需要添加到 bundle 中以增加体积为代价，但是对于生产环境，则希望更精准的 source map，需要从 bundle 中分离并独立存在。
 
-W> There are some issues with Source Maps in Chrome. [We need your help!](https://github.com/webpack/webpack/issues/3165).
+W> Chrome 中的 source map 有一些问题。[我们需要你的帮助！](https://github.com/webpack/webpack/issues/3165)。
 
-T> See [`output.sourceMapFilename`](/configuration/output/#outputsourcemapfilename) to customize the filenames of generated Source Maps.
+T> 查看 [`output.sourceMapFilename`](/configuration/output#output-sourcemapfilename) 自定义生成的 source map 的文件名。
 
 
-### Qualities
+### 品质说明(quality)
 
-`bundled code` - You see all generated code as a big blob of code. You don't see modules separated from each other.
+`打包后的代码` - 将所有生成的代码视为一大块代码。你看不到相互分离的模块。
 
-`generated code` - You see each module separated from each other, annotated with module names. You see the code generated by webpack. Example: Instead of `import {test} from "module"; test();` you see something like `var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();`.
+`生成后的代码` - 每个模块相互分离，并用模块名称进行注释。可以看到 webpack 生成的代码。示例：你会看到类似 `var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();`，而不是 `import {test} from "module"; test();`。
 
-`transformed code` - You see each module separated from each other, annotated with module names. You see the code before webpack transforms it, but after Loaders transpile it. Example: Instead of `import {test} from "module"; class A extends test {}` you see something like `import {test} from "module"; var A = function(_test) { ... }(test);`
+`转换过的代码` - 每个模块相互分离，并用模块名称进行注释。可以看到 webpack 转换前、loader 转译后的代码。示例：你会看到类似 `import {test} from "module"; var A = function(_test) { ... }(test);`，而不是 `import {test} from "module"; class A extends test {}`。
 
-`original source` - You see each module separated from each other, annotated with module names. You see the code before transpilation, as you authored it. This depends on Loader support.
+`原始源代码` - 每个模块相互分离，并用模块名称进行注释。你会看到转译之前的代码，正如编写它时。这取决于 loader 支持。
 
-`without source content` - Contents for the sources are not included in the Source Maps. Browsers usually try to load the source from the webserver or filesystem. You have to make sure to set [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate) correctly to match source urls.
+`无源代码内容` - source map 中不包含源代码内容。浏览器通常会尝试从 web 服务器或文件系统加载源代码。你必须确保正确设置 [`output.devtoolModuleFilenameTemplate`](/configuration/output/#output-devtoolmodulefilenametemplate)，以匹配源代码的 url。
 
-`(lines only)` - Source Maps are simplified to a single mapping per line. This usually means a single mapping per statement (assuming you author it this way). This prevents you from debugging execution on statement level and from settings breakpoints on columns of a line. Combining with minimizing is not possible as minimizers usually only emit a single line.
+`（仅限行）` - source map 被简化为每行一个映射。这通常意味着每个语句只有一个映射（假设你使用这种方式）。这会妨碍你在语句级别上调试执行，也会妨碍你在每行的一些列上设置断点。与压缩后的代码组合后，映射关系是不可能实现的，因为压缩工具通常只会输出一行。
 
 
-### Development
+### 对于开发环境
 
-The following options are ideal for development:
+以下选项非常适合开发环境：
 
-`eval` - Each module is executed with `eval()` and `//@ sourceURL`. This is pretty fast. The main disadvantage is that it doesn't display line numbers correctly since it gets mapped to transpiled code instead of the original code (No Source Maps from Loaders).
+`eval` - 每个模块都使用 `eval()` 执行，并且都有 `//@ sourceURL`。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。
 
-`eval-source-map` - Each module is executed with `eval()` and a SourceMap is added as a DataUrl to the `eval()`. Initially it is slow, but it provides fast rebuild speed and yields real files. Line numbers are correctly mapped since it gets mapped to the original code. It yields the best quality SourceMaps for development.
+`eval-source-map` - 每个模块使用 `eval()` 执行，并且 source map 转换为 DataUrl 后添加到 `eval()` 中。初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。
 
-`eval-cheap-source-map` - Similar to `eval-source-map`, each module is executed with `eval()`. It is "cheap" because it doesn't have column mappings, it only maps line numbers. It ignores SourceMaps from Loaders and only display transpiled code similar to the `eval` devtool.
+`eval-cheap-source-map` - 类似 `eval-source-map`，每个模块使用 `eval()` 执行。这是 "cheap(低开销)" 的 source map，因为它没有生成列映射(column mapping)，只是映射行数。它会忽略源自 loader 的 source map，并且仅显示转译后的代码，就像 `eval` devtool。
 
-`eval-cheap-module-source-map` - Similar to `eval-cheap-source-map`, however, in this case Source Maps from Loaders are processed for better results. However Loader Source Maps are simplified to a single mapping per line.
+`eval-cheap-module-source-map` - 类似 `eval-cheap-source-map`，并且，在这种情况下，源自 loader 的 source map 会得到更好的处理结果。然而，loader source map 会被简化为每行一个映射(mapping)。
 
-### Special cases
+### 特定场景
 
-The following options are not ideal for development nor production. They are needed for some special cases, i. e. for some 3rd party tools.
+以下选项对于开发环境和生产环境并不理想。他们是一些特定场景下需要的，例如，针对一些第三方工具。
 
-`inline-source-map` - A SourceMap is added as a DataUrl to the bundle.
+`inline-source-map` - source map 转换为 DataUrl 后添加到 bundle 中。
 
-`cheap-source-map` - A SourceMap without column-mappings ignoring loader Source Maps.
+`cheap-source-map` - 没有列映射(column mapping)的 source map，忽略 loader source map。
 
-`inline-cheap-source-map` - Similar to `cheap-source-map` but SourceMap is added as a DataUrl to the bundle.
+`inline-cheap-source-map` - 类似 `cheap-source-map`，但是 source map 转换为 DataUrl 后添加到 bundle 中。
 
-`cheap-module-source-map` - A SourceMap without column-mappings that simplifies loader Source Maps to a single mapping per line.
+`cheap-module-source-map` - 没有列映射(column mapping)的 source map，将 loader source map 简化为每行一个映射(mapping)。
 
-`inline-cheap-module-source-map` - Similar to `cheap-module-source-map` but SourceMap is added as a DataUrl to the bundle.
+`inline-cheap-module-source-map` - 类似 `cheap-module-source-map`，但是 source mapp 转换为 DataUrl 添加到 bundle 中。
 
 
-### Production
+### 对于生产环境
 
-These options are typically used in production:
+这些选项通常用于生产环境中：
 
-`(none)` (Omit the `devtool` option) - No SourceMap is emitted. This is a good option to start with.
+`(none)`（省略 `devtool` 选项） - 不生成 source map。这是一个不错的选择。
 
-`source-map` - A full SourceMap is emitted as a separate file. It adds a reference comment to the bundle so development tools know where to find it.
+`source-map` - 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。
 
-W> You should configure your server to disallow access to the Source Map file for normal users!
+W> 你应该将你的服务器配置为，不允许普通用户访问 source map 文件！
 
-`hidden-source-map` - Same as `source-map`, but doesn't add a reference comment to the bundle. Useful if you only want SourceMaps to map error stack traces from error reports, but don't want to expose your SourceMap for the browser development tools.
+`hidden-source-map` - 与 `source-map` 相同，但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露你的 source map，这个选项会很有用。
 
-W> You should not deploy the Source Map file to the webserver. Instead only use it for error report tooling.
+W> 你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。
 
-`nosources-source-map` - A SourceMap is created without the `sourcesContent` in it. It can be used to map stack traces on the client without exposing all of the source code. You can deploy the Source Map file to the webserver.
+`nosources-source-map` - 创建的 source map 不包含 `sourcesContent(源代码内容)`。它可以用来映射客户端上的堆栈跟踪，而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。
 
-W> It still exposes filenames and structure for decompiling, but it doesn't expose the original code.
+W> 这仍然会暴露反编译后的文件名和结构，但它不会暴露原始代码。
 
-T> If the default webpack `minimizer` has been overridden (such as to customise the `terser-webpack-plugin` options), make sure to configure its replacement with `sourceMap: true` to enable SourceMap support.
+T> 如果默认的 webpack `minimizer` 被覆盖 (例如自定义 `terser-webpack-plugin` 选项)， 请确保将其替换配置为  `sourceMap: true` 以启用 SourceMap 支持。