推荐我的另一篇文章:Webpack基础
代码通常运行在浏览器上时,是通过打包压缩的:
但是,当代码报错需要调试时(debug),调试转换后的代码是很困难的
那么如何可以调试这种转换后不一致的代码呢?答案就是 source-map
source-map
是从已转换的代码,映射到原始的源文件如何可以使用source-map呢?
const path = require('path') module.exports = { mode: 'production', devtool: "source-map", entry: './src/main.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, './build') } }
console.log("hello world"),console.log("foo function exec~"); //# sourceMappingURL=bundle.js.map
浏览器会根据我们的注释,查找相应的source-map,并且根据source-map还原我们的代码,方便进行调试。
在Chrome中,可以按照如下的方式打开source-map:
最初source-map生成的文件大小是原始文件的10倍,第二版减少了约50%,第三版又减少了50%,所以目前一个133kb的文件,最终的source-map的大小大概在300kb。
目前的source-map长什么样子呢?
如何在使用webpack打包的时候,生成对应的source-map呢?
下面几个值不会生成source-map
false:不使用source-map,也就是没有任何和source-map相关的内容
none:production
模式下的默认值(什么值都不写) ,不生成source-map
eval:development
模式下的默认值,不生成source-map
//# sourceURL=
;其他常见的值
production
模式下设置,生成一个独立的source-map文件,并且在bundle文件中有一个注释,指向source-map文件//# sourceMappingURL=bundle.js.map
eval-source-map:会生成sourcemap,但是source-map是以DataUrl添加到eval函数的后面
inline-source-map:会生成sourcemap,但是source-map是以DataUrl添加到bundle文件的后面
cheap-source-map(development
):
cheap-module-source-map(development
):
babel-loader
来处理,生成的source-map文件会将一些空行删掉,无法更好的还原,此时可以使用此选项hidden-source-map:
如果我们手动添加进来,那么sourcemap就会生效了
//# sourceMappingURL=bundle.js.map
nosources-source-map:会生成sourcemap,但是生成的sourcemap只有错误信息的提示,不会生成源代码文件
组合值
组合的规则如下:
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
开发阶段:推荐使用 source-map
或者 cheap-module-source-map
测试阶段:推荐使用 source-map
或者 cheap-module-source-map
发布阶段:false
、缺省值(不写)