大家都知道,webpack打包过的.js文件都是被压缩甚至混淆过的。所以,在浏览器里面,如果想调试这些.js文件的话,会变得非常困难。一般业界解决这个问题的办法,就是设置sourcemap。也就是一种方便调试的设置,但是,一般在生产模式的话,是不用这些sourcemap的。

苏南大叔:webpack4系列教程,如何修改js调试的sourcemap模式 - webpack-sourcemap-hero
webpack4系列教程,如何修改js调试的sourcemap模式(图1-1)

本文测试环境:macnode@14.2.0npm@6.14.4webpack@4.43.0。如果你要调试的.js代码是非常复杂的那种,则会强烈建议您开启sourcemap。在webpack@4中,开始sourcemap的方式将在本文中和大家介绍。

参数设置devtool

修改webpack.config.js的设置文件,设置devtool参数。范例如下:

//...
module.exports = {
    //...
    entry: {
        //...
    },
    output: {
        //...
    },
    plugins: [
        //...
    ],
    devtool: 'inline-source-map',
    devServer: {
        //...
    },
    module: {
        //...        
    },
}

在上述例子中,devtool被设置成了inline-source-map。也就是说,sourcemap.js文件里面内联出现。

可用的选项

选项说明
eval用eval的方式生成映射关系代码,效率和性能最佳。但是当代码复杂时,提示信息可能不精确。
eval-cheap-source-map转换代码(行内) 每个模块被eval执行,并且sourcemap作为eval的一个dataurl
eval-cheap-module-source-map原始代码(只有行内) 同样道理,但是更高的质量和更低的性能
eval-source-map原始代码,最高的质量和最低的性能
cheap-source-map转换代码(行内) 生成的sourcemap没有列映射,从loaders生成的sourcemap没有被使用
cheap-module-source-map原始代码(只有行内) 与上面一样除了每行特点的从loader中进行映射
inline-cheap-source-mapcheap有两种作用:一是将错误只定位到行,不定位到列。二是映射业务代码,不映射loader和第三方库等。会提升打包构建的速度。
inline-cheap-module-source-mapmodule会映射loader和第三方库
source-map会生成map格式的文件,里面包含映射关系的代码,原始代码 最好的sourcemap质量有完整的结果,但是会很慢
inline-source-map不会生成map格式的文件,包含映射关系的代码会放在打包后生成的代码中
hidden-source-map
nosources-source-map

这些sourcemap模式是苏南大叔从下面的这个代码中找到的:

从上面的代码中还可以看到,实际上是调用的coffee script来生成sourcemap的。上面的列表中,苏南大叔没有写详细的说明,因为苏南大叔目前暂时也无法正确分辨其细微区别,另外,个人认为,没有必要做那么多的变换...

比如,您设置个inline-cheap-module-source-map 就可以了,对于普通开发者来说,这么多设置没有啥特别的区别。一般来说,在开发环境中使用:cheap-module-eval-source-map,在生产环境中使用:cheap-module-source-map

相关链接

在调试electron的时候,也有个类似的问题,大家可以看看下面这篇文章:

总结

这篇文章,以后可能还会有续集。暂留吧。感谢各位读者的支持。苏南大叔的webpak@4系列教程,可以通过下面的链接查看:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: