webpack提供了非常多的选项来处理sourcemap,不同的选项对打包的速度和性能稍有差异。
下面几个值不会生成sourcemap:
devtool : false | (none) | "eval"
在开发模式下设置成none会报错,开发环境下不写devtool默认为eval,生产环境下不写devtool默认为none。
devtool几个关键的值
eval : 在打包的时候将代码转为字符串放入eval函数中,可以在eval函数的最后一行进行注释并且生效,最后一行的注释的目的是为了让生成的代码在浏览器里转为固定的文件。
source-map : 生成独立的sourcemap文件,并且在bundle文件中有一个注释,指向sourcemap文件。
eval-source-map : 生成sourcemap,但sourcemap是以dataurl添加到eval函数后面。
inline-source-map : 生成sourcemap,但sourcemap是以dataurl添加到bundle文件最后。
cheap-source-map : 生成sourcemap,但是会更高效,因为他没有生成列映射。
cheap-module-source-map : 类似于cheap-source-map,但对源自loader的sourcemap处理会更好。如将es6通过babel-loader转义为es5时cheap-source-map寻找到的报错位置信息会与源文件有所差异,但cheap-module-source-map会更精确的找到报错位置。
hidden-source-map : 生成sourcemap,但是不会对sourcemap文件进行引用。
nosources-source-map : 生成sourcemap,但只有错误信息的提示,不会生成源代码文件。
剩下的值是上面值得组合
组合规则:
inline-hiddle-eval 三选一
nosources 可选
cheap 可选,并且可以跟随module
开发环境推荐使用:cheap-module-source-map
测试阶段推荐使用:source-map 或者 cheap-module-source-map