webpack_sourceMap

sourceMap

• eval: 速度最快，使用 eval 包裹代码
• source-map：产生.map文件，外部产生错误代码的位置和信息
• cheap：较快，不包含列信息
• Module：第三方模块，包含 loader 的 sourceMap// 无论是 JSX 还是 vue 单文件组件，Loader 转换后差别都很大，需要调试 Loader 转换前的源代码。
• inline：将.map文件作为 dateURI 嵌入，不单独生成

验证 devtool 名称时， 我们期望使用某种模式， 注意不要混淆 devtool 字符串的顺序， 模式是： [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

特殊模式

• inline-source-map 模式
  它跟普通的 source-map 效果相同，只不过这种模式下 Source Map 文件不是以物理文件存在，而是以 data URLs 的方式出现在代码中。我们前面遇到的 eval-source-map 也是这种 inline 的方式。

• hidden-source-map 模式
  在这个模式下，我们在开发工具中看不到 Source Map 的效果，但是它也确实生成了 Source Map 文件，这就跟 jQuery 一样，虽然生成了 Source Map 文件，但是代码中并没有引用对应的 Source Map 文件，开发者可以自己选择使用。

• nosources-source-map 模式：
  在这个模式下，我们能看到错误出现的位置（包含行列位置），但是点进去却看不到源代码。这是为了保护源代码在生产环境中不暴露。

推荐配置

vuecli production 采用 source-map

个人理解 production 应该使用 none 或者 nosources-source-map

development 采用 cheap-module-eval-source-map