⚠️ 注意： 永远不要在生产环境中使用这些工具，永远不要。
当 JavaScript 异常抛出时，你常会想知道这个错误发生在哪个文件的哪一行。然而因为 webpack 将文件输出为一个或多个 bundle，所以 追踪这一错误会很不方便。
Source maps 试图解决这一问题。它有很多选择，各有优劣：
devtoolbuildrebuildproductionqualityeval++++++nogenerated codecheap-eval-source-map+++notransformed code (lines only)cheap-source-map+oyestransformed code (lines only)cheap-module-eval-source-mapo++nooriginal source (lines only)cheap-module-source-mapo-yesoriginal source (lines only)eval-source-map--+nooriginal sourcesource-map----yesoriginal sourcenosources-source-map----yeswithout source content+ 表示较快，- 表示较慢，o 表示时间相同
对于开发环境，通常希望更快速的 Source Map，需要添加到 bundle 中以增加体积为代价，但是对于生产环境，则希望更精准的 Source Map，需要从 bundle 中分离并独立存在。
个人建议：开发环境使用 cheap-module-eval-source-map ；开发环境使用 cheap-module-source-map 。
使用方式非常简单，在 webpack.config.js 中配置如下：
module.exports = { // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试 // devtool: "eval", // 没有模块映射，而是命名模块。以牺牲细节达到最快。 // devtool: "source-map", // 牺牲了构建速度的 `source-map' 是最详细的 // devtool: "inline-source-map", // 嵌入到源文件中 // devtool: "eval-source-map", // 将 SourceMap 嵌入到每个模块中 // devtool: "hidden-source-map", // SourceMap 不在源文件中引用 // devtool: "cheap-source-map", // 没有模块映射(module mappings)的 SourceMap 低级变体(cheap-variant) // devtool: "cheap-module-source-map", // 有模块映射(module mappings)的 SourceMap 低级变体 devtool: "cheap-module-eval-source-map", };webpack-dev-server 可以提供了一个服务器和实时重载（live reloading） 功能。
在开始前，确定你有一个 index.html 文件指向你的 bundle。假设 output.filename 是 bunlde.js。
<html> <body> <script type="text/javascript" src="./dist/bundle.js"></script> </body> </html>首先从 npm 安装 webpack-dev-server：
$ npm install --save-dev webpack-dev-server安装完成之后，你应该可以使用 webpack-dev-server 了，方式如下：
$ webpack-dev-server --open上述命令应该自动在浏览器中打开 http://localhost:8080。
