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


Posted in Javascript onNovember 07, 2018

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打包后如何调试的方法步骤

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决jquery版本冲突的有效方法
Sep 02 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
AngularJs表单验证实例详解
May 30 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
微信小程序列表中item左滑删除功能
Nov 07 #Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 #Javascript
VueCli3构建TS项目的方法步骤
Nov 07 #Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 #Javascript
vue+webpack中配置ESLint
Nov 07 #Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 #Javascript
React 源码中的依赖注入方法
Nov 07 #Javascript
You might like
PHP与javascript对多项选择的处理
2006/10/09 PHP
深入PHP变量存储的详解
2013/06/13 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
基于vue.js的分页插件详解
2017/11/27 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python封装对象实现时间效果
2020/04/23 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
C语言开发工程师测试题
2016/12/20 面试题
客服服务心得体会
2013/12/30 职场文书
小学教师听课制度
2014/02/01 职场文书
校企合作协议书
2014/04/16 职场文书
家长通知书家长意见
2014/12/30 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL