webpack-用devtool控制生成source-map
什么是SourceMap?
当我们对项目进行打包时,经过一系列编译和转换,最终会形成生产环境的项目代码,并将此部署至线上。众所周知,生产环境代码和打包后的代码千差万别,当构建后的代码报错,如果没有SourceMap,很难将错误溯源至源代码,这对开发很不友好
SourceMap形成了源代码和构建后代码的映射关系，比如打包后产生的.map文件(eg:test.js.map)即为SourceMap文件。
示范
没有使用sourcemap:
配置了sourcemap之后:
在webpack.config.js中配置
详细参考官方文档https://webpack.docschina.org/configuration/devtool/#root
devtool:'source-map' //字符串的顺序模式是： [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
对于开发环境
以下选项非常适合开发环境：
-
eval - 每个模块都使用 eval() 执行，并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码，所以不能正确的显示行数。
-
eval-source-map - 每个模块使用 eval() 执行，并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。
-
eval-cheap-source-map - 类似 eval-source-map，每个模块使用 eval() 执行。这是 "cheap" 的 source map，因为它没有生成列映射，只是映射行数。
-
eval-cheap-module-source-map - 类似 eval-cheap-source-map，并且，在这种情况下，源自 loader 的 source map 会得到更好的处理结果。然而，loader source map 会被简化为每行一个映射(mapping)。
特定场景
以下选项对于开发环境和生产环境并不理想。他们是一些特定场景下需要的，例如，针对一些第三方工具。
-
inline-source-map - source map 转换为 DataUrl 后添加到 bundle 中。
-
cheap-source-map - 没有列映射(column mapping)的 source map，忽略 loader source map。
-
inline-cheap-source-map - 类似 cheap-source-map，但是 source map 转换为 DataUrl 后添加到 bundle 中。
-
cheap-module-source-map - 没有列映射(column mapping)的 source map，将 loader source map 简化为每行一个映射(mapping)。
-
inline-cheap-module-source-map - 类似 cheap-module-source-map，但是 source mapp 转换为 DataUrl 添加到 bundle 中。
对于生产环境
这些选项通常用于生产环境中：
-
(none)（省略 devtool 选项） - 不生成 source map。这是一个不错的选择。
-
source-map - 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。
-
hidden-source-map - 与 source-map 相同，但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露 source map，这个选项会很有用
-
nosources-source-map - 创建的 source map 不包含源代码内容。它可以用来映射客户端上的堆栈跟踪，而无须暴露所有的源代码。可以将 source map 文件部署到 web 服务器。
