webpack4系列教程，如何修改js调试的sourcemap模式

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

本文测试环境：mac、node@14.2.0、npm@6.14.4、webpack@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文件里面内联出现。

可用的选项

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

• https://github.com/webpack/webpack/blob/5656f2b94fbbba5c106257a136f4a302508c7f00/examples/source-map/webpack.config.js

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

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

相关链接

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

• https://newsn.net/say/chrome-inspect-electron-es6.html
• https://newsn.net/say/webpack-start.html

总结

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

• https://newsn.net/tag/webpack

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。