这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
课堂重点
今天学习了前端调试工具和一部分的webpack使用部分，前者让我学会如何排查bug，后者可以压缩优化我的上线项目，以下是我在这几节课中做的一些笔记记录下自己不会的部分。
调试小记
- 伪类元素可以右键或者选择器表中点击打开
- console.table 具象化的展示JSON和数组数据
- console.dir通过类似文件树的方式展示对象的属性。
- 真机调试方法
5.常用代理方法
、
- 浏览器打开node调试面板（在chrome://inspect/#devices 中配置network target）
- 快捷线上修改代码
8.小黄鸭调试大法
webpack小记
- webpack的loader有什么作用?将不是js的文件转换为webpack可以处理的模块
- cssloader和styleloader的区别和作用？
css-loader会处理
import/require（）@import/url引入的内容。获得是个数组，所以还需要style-loader，通过一个JS脚本创建一个style标签，里面包含一些样式
3.babel具体有什么功能？是对js代码处理兼容性的，通常是将E6转换为E5，webpack将各种文件转换为js可处理的模块，而babel则将这些js做的更加兼容。
4.webpack的优缺点
优点： 1、webpack是以commonJS的形式来书写脚本的，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移。
2、能被模块化的不仅是JS了
3、开发便捷，能替代部分grunt/gulp的工作，比如打包、压缩混淆、图片转base64等。
4、扩展性强，插件机制完善
缺点： 配置复杂
1. 不分包bundle.js体积庞大
2. 只能用于采用模块化开发的项目
3. 打包慢
4. ES模块除Module外全用babel转换，但是一部分ES2015语法的firefox与chrome（谷歌）浏览器 中能直接跑的代码，无法用webpack编译
个人总结
前端向来不只是写写三大件代码的问题，说是入门容易，却又涉及到非常多的东西，很多也需要一定的掌握，学的多，懂得多自然也能提高自己开发的效率。
文章参考
Babel是什么？Babel到底可以用来干嘛___一文带你从零开始认识Babel blog.csdn.net/weixin_4514… webpack的优缺点 cxh.xiaonyun.com/2019/04/27/… css-loader和style-loader的区别和使用 blog.csdn.net/wu_xianqian…
