原始碼對映

摘要： When your source code has gone through transformations, debugging becomes a problem. When debugging in a browser, how to tell where the ori...

When your source code has gone through transformations, debugging becomes a problem. When debugging in a browser, how to tell where the original code is? Source maps solve this problem by providing a mapping between the original and the transformed source code. In addition to source compiling to JavaScript, this works for styling as well.

當你的原始碼完成轉換後，除錯就成了一個問題。在瀏覽器中除錯時，如何確認程式碼中的原始位置呢？ Source maps 通過建立原始碼與轉換後的程式碼之間的對映關係來解決這個問題。除了可以用在編譯後的Javascript中，還可以用在樣式中。

One approach is to skip source maps during development and rely on browser support of language features. If you use ES2015 without any extensions and develop using a modern browser, this can work. The advantage of doing this is that you avoid all the problems related to source maps while gaining better performance.

在開發中不使用原始碼對映的方法是依賴於瀏覽器對語言特性的支援。如果你只使用ES015而不使用任何擴充套件並且在開發中使用現代瀏覽器，這是可以實現的。這樣做的好處就是為了獲取更好的效能時可以避免由於原始碼對映導致的效能下降問題。

If you are using webpack 4 and the new mode option, the tool will generate source maps automatically for you in development mode. Production usage requires attention, though.

如果你在使用Webpack4並且使用 mode 選項，在 development 模式下，Webpack會自動生成原始碼對映關係。但是需要注意生產環境的使用。

T> If you want to understand the ideas behind source maps in greater detail, read Ryan Seddon's introduction to the topic .

如果想深入瞭解source map的機制，可以讀Ryan Seddon的 介紹 .

T> To see how webpack handles source maps, see source-map-visualization by the author of the tool.

T> 想了解webpack如何處理原始碼對映, 檢視工具作者寫的 source-map-visualization .

Inline Source Maps and Separate Source Maps(內聯原始碼對映和分離原始碼對映)

Webpack can generate both inline or separate source map files. The inline ones are valuable during development due to better performance while the separate ones are handy for production use as it keeps the bundle size small. In this case, loading source maps is optional.

Webpack即可以生成內聯原始碼對映也可以生成分離原始碼對映。內聯原始碼對映在開發時非常有用，而為了追求生產環境中更好的效能，分離原始碼對映通過保持Bundle的檔案更小而更加方便。這種情況下，載入原始碼對映是選擇性的。

It's possible you don't want to generate a source map for your production bundle as this makes it effortless to inspect your application. By disabling source maps, you are performing a sort of obfuscation. Whether or not you want to enable source maps for production, they are handy for staging. Skipping source maps speeds up your build as generating source maps at the best quality can be a complicated operation.

你一定不想在生產環境中生成原始碼對映，因為它能用來非常容易的分析你的程式。通過禁用原始碼對映，你要執行一系列混淆。無論你想不想啟用原始碼對映，但是它們對於演示來說非常方便。跳過原始碼對映可以加快你的構建速度，而生成原始碼對映可以提升質量，這可能成為一個複雜的操作。

Hidden source mapsgive stack trace information only. You can connect them with a monitoring service to get traces as the application crashes allowing you to fix the problematic situations. While this isn't ideal, it's better to know about possible problems than not.

隱藏原始碼對映只能提供堆疊跟蹤資訊。在程式崩潰的時候，可以讓你把他們連線到監視服務來獲取跟蹤資訊來解決有問題的情況。雖然這樣並不理想，但是知道可能的問題總比不知道要好。

T> It's a good idea to study the documentation of the loaders you are using to see loader specific tips. For example, with TypeScript, you have to set a particular flag to make it work as you expect.

學習你在使用的載入器的具體提示是個好主意。例如，在Typescript中，你得設定一個標誌才能讓它按照預想的方式工作。

Enabling Source Maps(啟用原始碼對映)

Webpack provides two ways to enable source maps. There's a devtool shortcut field. You can also find two plugins that give more options to tweak. The plugins are going to be discussed briefly at the end of this chapter. Beyond webpack, you also have to enable support for source maps at the browsers you are using for development.

Webpack有兩種方式來啟用原始碼對映。有一個欄位 devtool 。你也能找到兩個外掛，他們能提供更多的選項做進一步配置。這些外掛將在本文最後做個簡單的介紹。除了Webpack，我們還得在開發使用的瀏覽器中啟用原始碼對映支援。

Enabling Source Maps in Webpack(啟用Webpack中的原始碼對映)

To get started, you can wrap the core idea within a configuration part. You can convert this to use the plugins later if you want:

在開始前，你可以把這個核心思想封裝在一個配置部分中。如果願意，你可以稍後將其轉換成外掛：

webpack.parts.js

exports.generateSourceMaps = ({ type }) => ({
devtool: type,
});

Webpack supports a wide variety of source map types. These vary based on quality and build speed. For now, you enable source-map for production and let webpack use the default for development. Set it up as follows:

Webpack支援很多種原始碼對映型別。他們的不同在於質量和構建速度。現在，為生產環境啟用 source-map 並且讓webpack對開發環境使用預設配置。按如下方式配置：

webpack.config.js

const productionConfig = merge([
leanpub-start-insert
parts.generateSourceMaps({ type: "source-map" }),
leanpub-end-insert
...
]);

source-map is the slowest and highest quality option of them all, but that's fine for a production build.

source-map 是最慢但是質量卻最高的，這對生產環境構建很適合。

{pagebreak}

If you build the project now ( npm run build ), you should see source maps in the output:

如果你現在構建專案（ npm run build ），就能在輸出中看到原始碼對映：

Hash: b59445cb2b9ae4cea11b
Version: webpack 4.1.1
Time: 1347ms
Built at: 3/16/2018 4:58:14 PM
AssetSizeChunksChunk Names
main.js838 bytes0[emitted]main
main.css3.49 KiB0[emitted]main
 main.js.map3.75 KiB0[emitted]main
main.css.map85 bytes0[emitted]main
index.html220 bytes[emitted]
Entrypoint main = main.js main.css main.js.map main.css.map
...

Take a good look at those .map files. That's where the mapping between the generated and the source happens. During development, it writes the mapping information in the bundle.

仔細檢視這些 .map 檔案。這就是儲存原始碼和編譯後的程式碼的對映關係的地方。在開發的時候，它把對映資訊直接寫到Bundle中。

Enabling Source Maps in Browsers(在瀏覽器中啟用原始碼對映)

To use source maps within a browser, you have to enable source maps explicitly as per browser-specific instructions:

要想在瀏覽器中使用原始碼對映，你得根據不同瀏覽器的具體介紹準確啟用原始碼對映。

• Chrome . Sometimes source maps will not update in Chrome inspector . For now, the temporary fix is to force the inspector to reload itself by using alt-r .
• Firefox
• IE Edge
• Safari

W> If you want to use breakpoints (i.e., a debugger; statement or ones set through the browser), the eval -based options won't work in Chrome!

如果你想用斷點（例如，一個 debugger 語句或者通過瀏覽器設定），在chrome中基於 eval 的選項不起作用。

Source Map Types Supported by Webpack(webpack支援的原始碼對映型別)

Source map types supported by webpack can be split into two categories:

Webpack支援的原始碼對映可以分為兩類：

• Inline source maps add the mapping data directly to the generated files.
• Inline 原始碼對映直接將對映資料新增到生成檔案中.
• Separate source maps emit the mapping data to separate source map files and link the source to them using a comment. Hidden source maps omit the comment on purpose.
• Separate 原始碼對映將對映資料生成到獨立的原始碼對映檔案中並通過註釋將他們的原始碼關聯起來. Hidden source maps故意省略註釋。

Thanks to their speed, inline source maps are ideal for development. Given they make the bundles big, separate source maps are the preferred solution for production. Separate source maps work during development as well if the performance overhead is acceptable.

內聯原始碼對映由於速度快非常適合開發使用。由於他們使Bundle變大，分離的原始碼對映更受到生產環境的青睞。如果效能開銷可以接受，分離原始碼對映也可以用在開發中。

Inline Source Map Types(內聯原始碼對映型別)

Webpack provides multiple inline source map variants. Often eval is the starting point and webpack issue #2145 recommends cheap-module-eval-source-map as it's a good compromise between speed and quality while working reliably in Chrome and Firefox browsers.

Webpack提供多種內聯原始碼對映變體。 eval 通常作為開始點，在 webpack issue #2145 中推薦使用 cheap-module-eval-source-map 由於其很好的平衡了速度和質量並且在Firefox和Chrome中執行穩定。

To get a better idea of the available options, they are listed below while providing a small example for each. The source code contains only a single console.log('Hello world') and webpack.NamedModulesPlugin is used to keep the output easier to understand. In practice, you would see a lot more code to handle the mapping.

為了更好的離解可用的選項，下面列舉並使用短小的例子進行說明。原始碼中只包含一句 console.log('Hello world') 並且 webpack.NamedModulesPlugin 保證輸出更易於理解 。在實際中，你將會看到更多的程式碼來處理對映關係。

devtool: "eval"

eval generates code in which each module is wrapped within an eval function:

eval 生成程式碼，每個模組都封裝在一個 eval 函式中:

webpackJsonp([1, 2], {
"./src/index.js": function(module, exports) {
eval("console.log('Hello world');\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/index.js\n// module id = ./src/index.js\n// module chunks = 1\n\n//# sourceURL=webpack:///./src/index.js?")
}
}, ["./src/index.js"]);

devtool: "cheap-eval-source-map"

cheap-eval-source-map goes a step further and it includes base64 encoded version of the code as a data url. The result contains only line data while losing column mappings.

cheap-eval-source-map 更進一步，它包含base64編碼版本的程式碼作為資料的URL。結果中只包含行資料而沒有列的對映資料。

webpackJsonp([1, 2], {
"./src/index.js": function(module, exports) {
eval("console.log('Hello world');//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9hcHAvaW5kZXguanMuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hcHAvaW5kZXguanM/MGUwNCJdLCJzb3VyY2VzQ29udGVudCI6WyJjb25zb2xlLmxvZygnSGVsbG8gd29ybGQnKTtcblxuXG4vLy8vLy8vLy8vLy8vLy8vLy9cbi8vIFdFQlBBQ0sgRk9PVEVSXG4vLyAuL2FwcC9pbmRleC5qc1xuLy8gbW9kdWxlIGlkID0gLi9hcHAvaW5kZXguanNcbi8vIG1vZHVsZSBjaHVua3MgPSAxIl0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIifQ==")
}
}, ["./src/index.js"]);

{pagebreak}

If you decode that base64 string, you get output containing the mapping:

如果解碼base64的字串，就能得到包含對映關係的輸出：

{
"file": "./src/index.js",
"mappings": "AAAA",
"sourceRoot": "",
"sources": [
"webpack:///./src/index.js?0e04"
],
"sourcesContent": [
"console.log('Hello world');\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/index.js\n// module id = ./src/index.js\n// module chunks = 1"
],
"version": 3
}

devtool: "cheap-module-eval-source-map"

cheap-module-eval-source-map is the same idea, except with higher quality and lower performance:

cheap-module-eval-source-map 也是相同的思路，只是質量更高，但是效能更低：

webpackJsonp([1, 2], {
"./src/index.js": function(module, exports) {
eval("console.log('Hello world');//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9hcHAvaW5kZXguanMuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vYXBwL2luZGV4LmpzPzIwMTgiXSwic291cmNlc0NvbnRlbnQiOlsiY29uc29sZS5sb2coJ0hlbGxvIHdvcmxkJyk7XG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIGFwcC9pbmRleC5qcyJdLCJtYXBwaW5ncyI6IkFBQUEiLCJzb3VyY2VSb290IjoiIn0=")
}
}, ["./src/index.js"]);

{pagebreak}

Again, decoding the data reveals more:

再一次，解碼資料揭示更多資訊：

{
"file": "./src/index.js",
"mappings": "AAAA",
"sourceRoot": "",
"sources": [
"webpack:///src/index.js?2018"
],
"sourcesContent": [
"console.log('Hello world');\n\n\n// WEBPACK FOOTER //\n// src/index.js"
],
"version": 3
}

In this particular case, the difference between the options is minimal.

在這個特定的情況中，選項之間的差異是很小的。

devtool: "eval-source-map"

eval-source-map is the highest quality option of the inline options. It's also the slowest one as it emits the most data:

eval-source-map 是內聯選項中質量最高的選項。由於它產生最多的資料所以也是最慢的。

webpackJsonp([1, 2], {
"./src/index.js": function(module, exports) {
eval("console.log('Hello world');//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hcHAvaW5kZXguanM/ZGFkYyJdLCJuYW1lcyI6WyJjb25zb2xlIiwibG9nIl0sIm1hcHBpbmdzIjoiQUFBQUEsUUFBUUMsR0FBUixDQUFZLGFBQVoiLCJmaWxlIjoiLi9hcHAvaW5kZXguanMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zb2xlLmxvZygnSGVsbG8gd29ybGQnKTtcblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gLi9hcHAvaW5kZXguanMiXSwic291cmNlUm9vdCI6IiJ9")
}
}, ["./src/index.js"]);

{pagebreak}

This time around there's more mapping data available for the browser:

這回有更多的對映資料可供瀏覽器使用：

{
"file": "./src/index.js",
"mappings": "AAAAA,QAAQC,GAAR,CAAY,aAAZ",
"names": [
"console",
"log"
],
"sourceRoot": "",
"sources": [
"webpack:///./src/index.js?dadc"
],
"sourcesContent": [
"console.log('Hello world');\n\n\n// WEBPACK FOOTER //\n// ./src/index.js"
],
"version": 3
}

Separate Source Map Types（分離式原始碼對映型別）

Webpack can also generate production usage friendly source maps. These end up in separate files ending with .map extension and are loaded by the browser only when required. This way your users get good performance while it's easier for you to debug the application.

Webpack還能生成適用於生產環境的原始碼對映。它們最終存入以 .map 為副檔名的單獨檔案中，並且只在需要的情況下由瀏覽器載入。使用者可以獲得更好的效能，同時他也可以Debug程式。

source-map is a reasonable default here. Even though it takes longer to generate the source maps this way, you get the best quality. If you don't care about production source maps, you can skip the setting there and get better performance in return.

source-map 是這裡理所當然的預設值。儘管按這種方式生成程式碼對映會耗費更長時間，但是你能獲得更好的效能。如果你不介意生產環境的程式碼對映，可以跳過此步來獲取更好的效能。

{pagebreak}

devtool: "cheap-source-map"

cheap-source-map is similar to the cheap options above. The result is going to miss column mappings. Also, source maps from loaders, such as css-loader , are not going to be used.

cheap-source-map 和上面介紹的簡易選項一樣。結果就是丟失列對映關係。此外，來自載入器的原始碼對映（如 css-loader ）將不能使用。

Examining the .map file reveals the following output in this case:

在這個例子中，檢視 .map 檔案可以得到以下輸出:

{
"file": "main.9aff3b1eced1f089ef18.js",
"mappings": "AAAA",
"sourceRoot": "",
"sources": [
"webpack:///main.9aff3b1eced1f089ef18.js"
],
"sourcesContent": [
"webpackJsonp([1,2],{\"./src/index.js\":function(o,n){console.log(\"Hello world\")}},[\"./src/index.js\"]);\n\n\n// WEBPACK FOOTER //\n// main.9aff3b1eced1f089ef18.js"
],
"version": 3
}

The source contains //# sourceMappingURL=main.9a...18.js.map kind of comment at its end to map to this file.

原始碼結尾中包含 //# sourceMappingURL=main.9a...18.js.map 這樣的註釋來指向分離的對映檔案。

{pagebreak}

devtool: "cheap-module-source-map"

cheap-module-source-map is the same as previous except source maps from loaders are simplified to a single mapping per line. It yields the following output in this case:

除了載入器的源對映被簡化為每行一個對映之外， cheap-module-source-map 與前面的對映是相同的。在這種情況下，它產生如下輸出:

{
"file": "main.9aff3b1eced1f089ef18.js",
"mappings": "AAAA",
"sourceRoot": "",
"sources": [
"webpack:///main.9aff3b1eced1f089ef18.js"
],
"version": 3
}

W> cheap-module-source-map is currently broken if minification is used and this is an excellent reason to avoid the option for now.

W> 如果使用了minification cheap-module-source-map 就會遭到破壞，這也成為不使用這個選項的絕佳理由.

devtool: "hidden-source-map"

hidden-source-map is the same as source-map except it doesn't write references to the source maps to the source files. If you don't want to expose source maps to development tools directly while you wish proper stack traces, this is handy.

hidden-source-map 與 source-map 一樣，只不過它不會將原始碼對映的引用寫入原始檔中。如果您不想直接將源對映公開給開發工具，而希望使用適當的堆疊跟蹤，那麼這是非常方便的。

devtool: "nosources-source-map"

nosources-source-map creates a source map without sourcesContent in it. You still get stack traces, though. The option is useful if you don't want to expose your source code to the client.

nosources-source-map 建立的原始碼對映裡不包含 程式碼內容 。但是你還是能得到堆疊跟蹤資訊。如果不想暴露原始碼給使用者這個選項很有用。

T> The official documentation contains more information about devtool options.

T> The official documentation 包含更多關於 devtool 選項的資訊.

{pagebreak}

devtool: "source-map"

source-map provides the best quality with the complete result, but it's also the slowest option. The output reflects this:

source-map 用完整的結果提供最好的質量，但是它也是最慢的選項。輸出如下所示：

{
"file": "main.9aff3b1eced1f089ef18.js",
"mappings": "AAAAA,cAAc,EAAE,IAEVC,iBACA,SAAUC,EAAQC,GCHxBC,QAAQC,IAAI,kBDST",
"names": [
"webpackJsonp",
"./src/index.js",
"module",
"exports",
"console",
"log"
],
"sourceRoot": "",
"sources": [
"webpack:///main.9aff3b1eced1f089ef18.js",
"webpack:///./src/index.js"
],
"sourcesContent": [
"webpackJsonp([1,2],{\n\n/***/ \"./src/index.js\":\n/***/ (function(module, exports) {\n\nconsole.log('Hello world');\n\n/***/ })\n\n},[\"./src/index.js\"]);\n\n\n// WEBPACK FOOTER //\n// main.9aff3b1eced1f089ef18.js",
"console.log('Hello world');\n\n\n// WEBPACK FOOTER //\n// ./src/index.js"
],
"version": 3
}

{pagebreak}

Other Source Map Options（其他原始碼對映選項）

There are a couple of other options that affect source map generation:

還有其他一些選項影響原始碼對映的生成：

{
output: {
// Modify the name of the generated source map file.
// You can use [file], [id], and [hash] replacements here.
// The default option is enough for most use cases.
sourceMapFilename: '[file].map', // Default

// This is the source map filename template. It's default
// format depends on the devtool option used. You don't
// need to modify this often.
devtoolModuleFilenameTemplate:
'webpack:///[resource-path]?[loaders]'
},
}

T> The official documentation digs into output specifics.

T> 官方文件 深入研究了 output 的細節 .

W> If you are using UglifyJsPlugin and still want source maps, you need to enable sourceMap: true for the plugin. Otherwise, the result isn't what you expect because UglifyJS will perform a further transformation of the code, breaking the mapping. The same has to be done with other plugins and loaders performing changes. css-loader and related loaders are a good example.

W> 如果你在使用 UglifyJsPlugin ，並且想使用原始碼對映，你需要在外掛中啟用 sourcemap:true 。否則，結果與你的預期會不一致，因為UglifyJS會執行更深入的程式碼轉換從而破壞了對映。在其他的外掛和載入器中也需要做相應的修改。 css-loader 和相關的載入器就是很好的例子。

SourceMapDevToolPlugin and EvalSourceMapDevToolPlugin

If you want more control over source map generation, it's possible to use the SourceMapDevToolPlugin or EvalSourceMapDevToolPlugin instead. The latter is a more limited alternative, and as stated by its name, it's handy for generating eval based source maps.

如果想對原始碼對映進行更多的控制，你可以使用 SourceMapDevToolPlugin 或者 EvalSourceMapDevToolPlugin 來代替. 後者是一種更有限的選擇，正如其名稱所述，它對於生成基於 eval 的原始碼對映非常方便。

Both plugins can allow more granular control over which portions of the code you want to generate source maps for, while also having strict control over the result with SourceMapDevToolPlugin . Using either plugin allows you to skip the devtool option altogether.

這兩個外掛都允許更細粒度地控制要為哪部分程式碼生成原始碼對映, 同時還可以使用“SourceMapDevToolPlugin”嚴格控制結果。使用任何一個外掛都可以跳過“devtool”選項。

Given webpack matches only .js and .css files by default for source maps, you can use SourceMapDevToolPlugin to overcome this issue. This can be achieved by passing a test pattern like /\.(js|jsx|css)($|\?)/i .

考慮到webpack生成原始碼匹配時預設只匹配 .js 和 .css 檔案， 你可以使用 SouceMapDevToolPlugin 來解決這個問題。可以通過傳入一個 像 /\.(js|jsx|css)($|\?)/i `test 這樣的 test`模式來解決。

EvalSourceMapDevToolPlugin accepts only module and lineToLine options as described above. Therefore it can be considered as an alias to devtool: "eval" while allowing a notch more flexibility.

如上所述， EvalSourceMapDevToolPlugin 只接受 module 和 lineToLine 選項。因此可以把它看成是 devtool: "eval" 的別稱，只不過是配置更富彈性。

Changing Source Map Prefix(修改原始碼對映字首)

You can prefix a source map option with a pragma character that gets injected into the source map reference. Webpack uses # by default that is supported by modern browsers, so you don't have to set it.

您可以在原始碼對映選項前面加上一個 編譯指示 字元，該字元被注入到原始碼對映引用中。Webpack預設使用現代瀏覽器都支援的 # ,所以不用特地去設定它。

To override this, you have to prefix your source map option with it (e.g., @source-map ). After the change, you should see //@ kind of reference to the source map over //# in your JavaScript files assuming a separate source map type was used.

要替換它的話，你需要把它新增到原始碼對映選項的前面（例如： @source-map ）.修改之後，如果是正在使用分離對映檔案，你應該能在原始碼對映中看到 //@ 這樣的引用而不是 //# 。

Using Dependency Source Maps(使用依賴原始碼對映)

Assuming you are using a package that uses inline source maps in its distribution, you can use source-map-loader to make webpack aware of them. Without setting it up against the package, you get minified debug output. Often you can skip this step as it's a special case.

假設你在使用一個包，它在使用內聯原始碼對映，你可以使用 source-map-loader 來讓Webpack注意到他們。如果沒有對這個包進行設定，你會獲得較少的輸出。由於這是一個特例，通常你可以路過此步。

Source Maps for Styling(樣式的原始碼對映)

If you want to enable source maps for styling files, you can achieve this by enabling the sourceMap option. The same idea works with style loaders such as css-loader , sass-loader , and less-loader .

如果想在樣式檔案中使用原始碼對映，可以通過啟用 sourceMap 選項來實現。相同的想法對樣式載入器如 css-loader , sass-loader 和 less-loader 也適用。

The css-loader is known to have issues when you are using relative paths in imports. To overcome this problem, you should set output.publicPath to resolve the server url.

在imports中使用相對路徑會導致 css-loader 的 已知問題 發生.要解決這個問題，你應該設定 output.publicPath 來處理伺服器路徑。

{pagebreak}

Conclusion（總結）

Source maps can be convenient during development. They provide better means to debug applications as you can still examine the original code over a generated one. They can be valuable even for production usage and allow you to debug issues while serving a client-friendly version of your application.

原始碼對映給開發帶來了便利。他們提供了除錯應用程式更好的方法，因為你仍然可以通過生成的程式碼檢查原始程式碼。他們在生產環境中使用也是很有意義並且讓你可以在對使用者友好的版本中除錯問題。

To recap:(概述)

• Source maps can be helpful both during development and production. They provide more accurate information about what's going on and make it faster to debug possible problems.
• 原始碼對映 對於開發環境和生產環境都非常有幫助。
• Webpack supports a large variety of source map variants. They can be split into inline and separate source maps based on where they are generated. Inline source maps are handy during development due to their speed. Separate source maps work for production as then loading them becomes optional.
• Webpack 很多種原始碼對映變體。他們可以根據生成位置的不同被分成內聯式的和分離式的原始碼對映。因為內聯原始碼對映速度快非常適合開發階段。由於原始碼對映載入是可選的,分離原始碼對映適合於生產環境.
• devtool: "source-map" is the highest quality option making it valuable for production.
• devtool: "source-map" 是最高質量的選項，因此非常適合生產環境.
• cheap-module-eval-source-map is a good starting point for development.
• cheap-module-eval-source-map 是開發的一個好起點。
• If you want to get only stack traces during production, use devtool: "hidden-source-map" . You can capture the output and send it to a third party service for you to examine. This way you can capture errors and fix them.
• 如果只想在生產環境中獲得堆疊跟蹤，使用 devtool: "hidden-source-map 。您可以捕獲輸出並將其傳送到第三方服務以供檢查。這樣你 能捕獲錯誤並修復他們。
• SourceMapDevToolPlugin and EvalSourceMapDevToolPlugin provide more control over the result than the devtool shortcut.
• SourceMapDevToolPlugin 和 EvalSourceMapDevToolPlugin 比 devtool 對結果提供更多的控制。
• source-map-loader can come in handy if your dependencies provide source maps.
• 如果依賴包提供原始碼對映，那麼用 source-map-loader 就會很方便。
• Enabling source maps for styling requires additional effort. You have to enable sourceMap option per styling related loader you are using.
• 為式樣啟用原始碼對映需要進行額外的配置. 需要為每個載入器啟用 sourceMap 選項。

In the next chapter, you'll learn to split bundles and separate the current one into application and vendor bundles.

在下一節中，你將學到分離bundle並將現在的Bundle分離到應用Bundle和供應商Bundle中。