当前位置:主页 > javascript教程 > 详解webpack打包后如何调试的方法步骤

webpack打包后调试的方法

发布:2019-12-07 14:43:46 83


给寻找编程代码教程的朋友们精选了webpack打包相关的编程文章,网友扶和玉根据主题投稿了本篇教程内容,涉及到webpack打包调试、webpack、调试、详解webpack打包后如何调试的方法步骤相关内容,已被357网友关注,相关难点技巧可以阅读下方的电子资料。

详解webpack打包后如何调试的方法步骤

webpack.config.js

在配置devtool时,webpack给我们提供了四种选项

  1. source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度;
  2. cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便。
  3. eval-source-map:使用eval打包源文件模块,在同一个文件中生产干净的完整版的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定要不开启这个选项。
  4. cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法,生产的 Source map 会和打包后的JavaScript文件同行显示,没有影射列,和eval-source-map选项具有相似的缺点。

配置开发环境

module.exports = {
 devtool: 'source-map',
 entry:"",
 output: {
 }
 ....
}

详解webpack打包后如何调试的方法步骤

不配置开发环境

没有webpack选项

详解webpack打包后如何调试的方法步骤

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


参考资料

相关文章

  • python调试过程中多颜色输出方式

    发布:2023-03-25

    这篇文章主要介绍了python调试过程中多颜色输出方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教


  • webpack多入口配置方法总结

    发布:2020-01-03

    本篇文章主要介绍了webpack 多入口配置 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • Android Studio调试Gradle插件详情

    发布:2023-03-05

    这篇文章主要介绍了Android Studio调试Gradle插件详情,文章围绕主题展开详细的内容戒杀,具有一定的参考价值,需要的小伙伴可以参考一下


  • Pycharm配置远程调试的图文步骤

    发布:2019-06-05

    这篇文章主要介绍了Pycharm配置远程调试的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • Python 的第三方调试库 ​​​pysnooper​​ 使用示例

    发布:2023-04-01

    这篇文章主要介绍了Python 的第三方调试库 ​​​pysnooper​​ 使用示例的相关资料,需要的朋友可以参考下


  • 如何解决webpack的proxyTable无效的问题

    发布:2021-05-21

    这篇文章主要介绍了详解webpack的proxyTable无效的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 使用webpack搭建vue项目实现脚手架功能

    发布:2022-06-19

    为网友们分享了关于vue的教程,这篇文章主要介绍了使用webpack搭建vue项目实现脚手架功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • 分享React 项目迁移 Webpack Babel7的实现

    发布:2020-02-04

    这篇文章主要介绍了React 项目迁移 Webpack Babel7的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


网友讨论