webpack打包格式及使用说明

webpack打包的devTool选项格式的含义如下

选项	含义	优点	缺点	适用场景
eval	eval 会将每一个module模块，执行eval，执行后不会生成sourcemap文件，仅仅是在每一个模块后，增加sourceURL来关联模块处理前后对应的关系	速度快	由于会映射到转换后的代码，而不是映射到原始代码，所以不能正确的显示行数	开发环境
source-map	source-map会为每一个打包后的模块生成独立的sourcemap文件, 打包后的代码最后面一句代码是 //#sourceMappingURL=bundle.js.map，每个模块生成独立的.map文件	精确到行和列的映射	速度慢	生产环境
inline	该属性不会生成独立的 .map文件，而是将 .map文件以dataURL的形式插入	精确到行和列的映射	体积大
cheap	只映射到源代码的某一行，不精确到列，可以提升 sourcemap 生成速度	体积小 速度稍快	不能映射到列	生产环境
module	sourcemap 生成时会关联每一步 loader 生成的 sourcemap 和第三方模块的映射，配合 sourcemap-loader 可以映射回最初的源码	映射到最初源码		生产环境
nosources	不生成 sourceContent 内容，可以减小 sourcemap 文件的大小 sourcemap 里是有 sourceContent 部分的，也就是直接把源码贴在这里，这样的好处是根据文件路径查不到文件也可以映射，但这样会增加 sourcemap 的体积。 如果你确定根据文件路径能查找到源文件，那不生成 sourceContent 也行。	体积小		生产环境
hidden	就是生成 sourcemap 但是不关联，即代码最后没有 //#sourceMappingURL=bundle.js.map			生产环境

webpack 也会提示你应该按照什么顺序来组合。

它是按照这个正则来校验的：^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$

最佳实践：

线上的时候当然要启用 hidden，不关联 sourcemap，但要生成 sourcemap，不大需要 module 来映射回最初的源码，所以可能是 hidden-source-map 或者 hidden-cheap-source-map  这种。

开发的时候可以用 eval 的方式，这样是每个模块单独做映射，不用从 bundle.js 开始映射，然后 cheap 也可以开启，只映射到源码的某一行，提升生成速度，一般需要 module 来映射回最初的源码，所以可能是 eval-cheap-module-source-map 这种

调试代码，要映射回原始文件，sourcemap模式是不行的，会丢失loader的映射信息，导致映射结果是一个半源码半编译的文件，cheap-module-source-map可以，cheap只需要行信息，module会关联loader的sourcemap，能拿到完整的sourcemap

 

 

参考：

彻底搞懂 Webpack 的 sourcemap 配置原理 
理解webpack中的devTool的配置项 
一文搞懂SourceMap以及webpack devtool