静水深潭,做技术就是要沉下心来,知其理,了其用,发其优,比之邻,而后观子义。
前言:
我们实现功能丰富的应用,拥有复杂的js代码和一大堆依赖包,模块化,less等css预
处理 这些改进确实大大提供了我们开发效率,但是利用他们的开发的文件我们需要
额外的处理才能让浏览器识别,手动处理非常复杂,这就为webpack类的工具提供了需求;
知其理
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),
Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
了其用
- webpack 打包文件
- 可以处理像Less、Sass 、Stylus 、.Vue文件 ES6语法、Jsx、.Ts文件….自动转化成浏览器能识别的语言,不必专门去处理这些语言了。
- 可以对代码进行压缩、合并、混肴、减少http请求,减轻服务器的带宽….
- 像热更新、HMR-自动刷新实时预览修改后的效果,减少开发人员的负担。
- 其他的在工作中就会慢慢体会到把
比之邻
Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。
类似流程化的工具:
好的学习途径: