大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
这里以环境分类为分析方向
1.对开发环境
eval – 每个模块都使用 eval() 执行，并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。
![webpack的devtool[通俗易懂]](https://img2018.cnblogs.com/blog/899904/201811/899904-20181105133040653-1957765331.png)
![webpack的devtool[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450.jpg)
eval-source-map – 每个模块使用 eval() 执行，并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。
![webpack的devtool[通俗易懂]](https://img2018.cnblogs.com/blog/899904/201811/899904-20181105133423833-1577336920.png)
cheap-eval-source-map – 类似 eval-source-map，每个模块使用 eval() 执行。这是 “cheap(低开销)” 的 source map，因为它没有生成列映射(column mapping)，只是映射行数。它会忽略源自 loader 的 source map，并且仅显示转译后的代码，就像 eval devtool。
cheap-module-eval-source-map – 类似 cheap-eval-source-map，并且，在这种情况下，源自 loader 的 source map 会得到更好的处理结果。然而，loader source map 会被简化为每行一个映射(mapping)。
2.对生产环境
(none)（省略 devtool 选项） – 不生成 source map。这是一个不错的选择。
source-map – 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。并在打包文件的末尾添加//# souceURL，注释会告诉JS引擎原始文件位置。
你应该将你的服务器配置为，不允许普通用户访问 source map 文件！
![webpack的devtool[通俗易懂]](https://img2018.cnblogs.com/blog/899904/201811/899904-20181105135653021-1312307121.png)
hidden-source-map – 与 source-map 相同，但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露你的 source map，这个选项会很有用。
nosources-source-map – 创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪，而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器
参考：https://www.webpackjs.com/configuration/devtool/
https://www.cnblogs.com/hhhyaaon/p/5657469.html
https://blog.csdn.net/liwusen/article/details/79414508
转载于:https://www.cnblogs.com/myzy/p/9908920.html
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/185588.html原文链接：https://javaforall.net
