(16/24) webpack打包后的调试方法

在程序开发中,调试程序是最频繁的,那使用了webpack后,所有的代码都打包到了一起,这给调试带来了困难,但是webpack在设计时就已经考虑好了这点,它支持生产Source Maps来方便我们的调试。

Source Maps能够提供将压缩文件恢复到源文件原始位置的映射代码的方式,在Chrome和Firefox的开发工具既附带内置的Source Maps的支持。 Source Maps详细学习

在使用webpack时只要通过简单的devtool配置,webapck就会自动给我们生产source maps 文件,map文件是一种对应编译文件和源文件的方法,使调试变得简单。

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

1.source-map:在一个单独文件中产生一个完整且功能完全的.map文件(能定位到具体某行某个位置)。这个文件具有最好的source map,但是它会减慢打包速度; 在webpack.config.js中的入口文件上方配置:

module.exports = {
  devtool: 'eval-source-map', //配置调试
  entry:  "",
  output: {}
}

打包后的结果:

2.cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map(会告诉你具体某行出错,而不能具体到某行某个位置出错。),不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便。 在webpack.config.js中的入口文件上方配置:

module.exports = {
  devtool: 'eval-source-map', //配置调试
  entry:  "",
  output: {}
}

打包后结果:

3.eval-source-map:使用eval打包源文件模块,在同一个文件中生产干净的完整版的sourcemap(能定位到具体某行某个位置),但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定要不开启这个选项(生产时删除配置) 在webpack.config.js中的入口文件上方配置:

module.exports = {
  devtool: 'eval-source-map', //配置调试
  entry:  "",
  output: {}
}

打包后结果:

4.cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法,生产的 Source map 会和打包后的JavaScript文件同行显示,没有映射列(会告诉你具体某行出错,而不能具体到某行某个位置出错。),和eval-source-map选项具有相似的缺点。 在webpack.config.js中的入口文件上方配置:

module.exports = {
  devtool: 'cheap-module-eval-source-map', //配置调试
  entry:  "",
  output: {}
}

打包后结果:

四种打包模式,有上到下打包速度越来越快,不过同时也具有越来越多的负面作用,较快的打包速度的后果就是对执行和调试有一定的影响。

注意:如果大型项目可以使用source-map,如果是中小型项目使用eval-source-map就完全可以应对,需要强调说明的是,source map只适用于开发阶段,上线前记得修改这些调试设置。

最后,在打包上线时,注意需要删除devtool配置。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏运维经验分享

Nginx 防御CC攻击的两种方法 原

CC攻击可以归为DDoS攻击的一种。他们之间都原理都是一样的,即发送大量的请求数据来导致服务器拒绝服务,是一种连接攻击。CC攻击又可分为代理CC攻击,和肉鸡CC...

33640
来自专栏Jerry的SAP技术分享

一个最简单的WebSocket hello world demo

https://github.com/i042416/KnowlegeRepository/blob/master/practice/nodejs/server...

43140
来自专栏CSDN技术头条

开发桌面应用,自然用 Electron !

可能很多读者会感到奇怪,本来是说 Electron,为什么一开始要提到 Node.js 和 JavaScript 呢?它们是什么关系呢?别急,听我慢慢道来。

65120
来自专栏大史住在大前端

KOA中间件的基本运作原理

在中间件系统的实现上,KOA中间件通过async/await来在不同中间件之间交换控制权,工作机制和栈结构非常相似,建议结合《express中间件系统的基本实现...

14730
来自专栏Fundebug

JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in VS for/of

我们有多种方法来遍历 JavaScript 的数组或者对象,而它们之间的区别非常让人疑惑。Airbnb 编码风格禁止使用 for/in 与 for/of,你知道...

16940
来自专栏工作专用1

jquery.fileDownload.js插件导出excel

因为使用ajax导出excel会出现问题,所以现在使用jQuery.fileDownload.js插件来解决导出excel的问题

34400
来自专栏运维经验分享

nohup和&后台运行,进程查看及终止 原

  无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup.out 文件中。

17430
来自专栏Core Net

ASP.NET Core 2.2 十九. 你扔过来个json,我怎么接

  前文说道了Action的激活,这里有个关键的操作就是Action参数的映射与模型绑定,这里即涉及到简单的string、int等类型,也包含Json等复杂类型...

20030
来自专栏前端小叙

移动网页广告引入mraid.js使用指南

在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告...

21830
来自专栏娱乐心理测试

解读mpvue官方文档的Class 与 Style 绑定及不支持语法

在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.j...

15330

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励