Webpack4中的sourcemap食用指南

官方文档 webpack的官网，给出了十几种sourcemap

官方文档看的若是不是很明白能够看一下这篇博客 Webpack中的sourcemap以及如何在生产和开发环境中合理的设置sourcemap的类型，有详细的讲解eval、soure-map、inline、 cheap、module的做用，webpack的官网出了十几种sourcemap基本上就是这几个拼凑在一块儿的功能

开发环境

官方推荐eval、eval-source-map、cheap-eval-source-map、cheap-module-eval-source-map这四种方式

开发环境中比较推荐cheap-module-eval-source-map的方式，既可以生成准确的便于调试的sourcemap，构建速度也比较快

生成环境

官方推荐none，source-map，hidden-source-map，nosources-source-map这四种方式
none: 就是不生成source map，安全！

source-map: 生成 source map 文件，问题就是不安全，暴露源码，效果以下

所以官方推荐正确的使用方式是

你应该将你的服务器配置为，不容许普通用户访问 source map 文件！

hidden-source-map: 与 source-map 相同，但不会为 bundle 添加引用注释。若是你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露你的 source map，这个选项会颇有用,你不该将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。其实没太懂，实际使用中和none的效果同样

nosources-source-map: 建立的 source map 不包含sourcesContent(源代码内容)。它能够用来映射客户端上的堆栈跟踪，而无须暴露全部的源代码。你能够将 source map 文件部署到 web 服务器。 这仍然会暴露反编译后的文件名和结构，但它不会暴露原始代码。效果以下

因此总结一下，生成环境中，使用 source-map 而且将你的服务器配置为不容许普通用户访问 source map 文件的食用很舒服，毕竟能够舒服的看到报错信息，若是条件不容许的话使用nosources-source-map也是挺好的，暴露反编译后的文件名和结构影响通常不大