You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This option controls if and how source maps are generated.
19
+
此选项控制是否生成，以及如何生成 source map。
20
20
21
-
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.
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.
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> 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> 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`.
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.
`bundled code` - You see all generated code as a big blob of code. You don't see modules separated from each other.
74
+
`打包后的代码` - 将所有生成的代码视为一大块代码。你看不到相互分离的模块。
75
75
76
-
`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();`.
`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);`
78
+
`转换过的代码` - 每个模块相互分离，并用模块名称进行注释。可以看到 webpack 转换前、loader 转译后的代码。示例：你会看到类似 `import {test} from "module"; var A = function(_test) { ... }(test);`，而不是 `import {test} from "module"; class A extends test {}`。
79
79
80
-
`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.
`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.
82
+
`无源代码内容` - source map 中不包含源代码内容。浏览器通常会尝试从 web 服务器或文件系统加载源代码。你必须确保正确设置 [`output.devtoolModuleFilenameTemplate`](/configuration/output/#output-devtoolmodulefilenametemplate)，以匹配源代码的 url。
83
83
84
-
`(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.
`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-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-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-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.
W> You should configure your server to disallow access to the Source Map file for normal users!
122
+
W> 你应该将你的服务器配置为，不允许普通用户访问 source map 文件！
123
123
124
-
`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.
W> You should not deploy the Source Map file to the webserver. Instead only use it for error report tooling.
126
+
W> 你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。
127
127
128
-
`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.
W> It still exposes filenames and structure for decompiling, but it doesn't expose the original code.
130
+
W> 这仍然会暴露反编译后的文件名和结构，但它不会暴露原始代码。
131
131
132
-
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.
0 commit comments