webpack的source-map的详解

source-map：一种提供源代码到构建后代码的映射的技术（如果构建后代码出错了，通过映射可以追踪源代码错误）

参数：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

代码：

devtool: 'eval-source-map'

可选方案：[生成source-map的位置|给出的错误代码信息]

source-map：外部，错误代码准确信息和源代码的错误位置
inline-source-map：内联，只生成一个内联 source-map，错误代码准确信息和源代码的错误位置
hidden-source-map：外部，错误代码错误原因，但是没有错误位置（为了隐藏源代码），不能追踪源代码错误，只能提示到构建后代码的错误位置
eval-source-map：内联，每一个文件都生成对应的 source-map，都在 eval 中，错误代码准确信息和源代码的错误位
nosources-source-map：外部，错误代码准确信息，但是没有任何源代码信息（为了隐藏源代码）
cheap-source-map：外部，错误代码准确信息和源代码的错误位置，只能把错误精确到整行，忽略列
cheap-module-source-map：外部，错误代码准确信息和源代码的错误位置，module 会加入 loader 的 source-map

内联和外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快

开发/生产环境可做的选择：

开发环境：需要考虑速度快，调试更友好

速度快( eval > inline > cheap >... )
1. eval-cheap-souce-map
2. eval-source-map
调试更友好
1. souce-map
2. cheap-module-souce-map
3. cheap-souce-map

最终得出最好的两种方案 --> eval-source-map（完整度高，内联速度快） / eval-cheap-module-souce-map（错误提示忽略列但是包含其他信息，内联速度快）

生产环境：需要考虑源代码要不要隐藏，调试要不要更友好

内联会让代码体积变大，所以在生产环境不用内联
隐藏源代码
1. nosources-source-map 全部隐藏
2. hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

最终得出最好的两种方案 --> source-map（最完整） / cheap-module-souce-map（错误提示一整行忽略列）

webpack的source-map的详解相关推荐

pythonpandas函数详解_对pandas中Series的map函数详解
Series的map方法可以接受一个函数或含有映射关系的字典型对象. 使用map是一种实现元素级转换以及其他数据清理工作的便捷方式. (DataFrame中对应的是applymap()函数,当然Dat ...
java map中的entry_java中Map及Map.Entry详解（组图）
java中Map及Map.Entry详解(组图) 08-22栏目:技术 TAG:map.entry map.entry Map是java中的接口,Map.Entry是Map的一个内部接口. copyr ...
webpack打包后引用cdn的js_利用CDN加速react webpack打包后的文件详解
此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置) ...
Debian操作系统的源配置信息详解--Source.list配置文件详解
转载来源:https://wiki.debian.org/SourcesList#Repository_URL Debian操作系统的源配置信息详解--Source.list配置文件详解 Debian ...
java+getactionmap_Struts2 使用OGNL遍历map方法详解
一.Action中的代码:MapAction.java package com.zx.demo.action; import java.util.ArrayList; import java.util ...
Android 驱动（12）---Linux DTS(Device Tree Source)设备树详解
Linux DTS(Device Tree Source)设备树详解 Linux DTS(Device Tree Source)设备树详解之一(背景基础知识篇) Linux DTS(Device Tr ...
集合 (二) ----- Map集合详解
相关文章: <集合 (一) ----- 集合的基本概念与Collection集合详解> <集合 (二) ----- Map集合详解> 文章目录 Map集合详解一.Map集合基 ...
hive linux进程数,控制Hive MAP个数详解
控制Hive MAP个数详解 Hive的MAP数或者说MAPREDUCE的MAP数是由谁来决定的呢?inputsplit size,那么对于每一个inputsplit size是如何计算出来的,这是做 ...
高通平台msm8953 Linux DTS(Device Tree Source)设备树详解之二（DTS设备树匹配过程）
本系列导航: 高通平台8953 Linux DTS(Device Tree Source)设备树详解之一(背景基础知识篇) 高通平台8953 Linux DTS(Device Tree Source ...
高通平台8953 Linux DTS(Device Tree Source)设备树详解之一(背景基础知识篇)
本系列导航: 高通平台8953 Linux DTS(Device Tree Source)设备树详解之一(背景基础知识篇) 高通平台8953 Linux DTS(Device Tree Source ...

webpack的source-map的详解

webpack的source-map的详解相关推荐

最新文章

热门文章