我们常常谈论使用webpack的好处有很多,有些同学基础不是那么稳固或者说深度和广度都还不够的时候,很难体会到webpack有什么用。。再加上框架推出了配套的脚手架,比如vue 使用的是vue cli,但是底层是使用的webpack,
不得不说webpack 已经占据了很大的市场,我们也推荐使用webpack
一.我们简单的谈下 使用webpack的好处
概念:在webpack中一切皆模块
1.首先使用ES6 Moudle 的语法,我们的浏览器并不认识,可以使用webpack来编译使浏览器认识
2.静态文件.css .scss .styl .png .svg图片 字体文件等 都可以通过webpack编译
3.source Map代码错误定位 ,做同步代码分割code splitting(对公共代码提取) 异步加载代码(可自动进行代码分割),Tree sharking(忽略未使用的代码)等
4.启动一个DevServer的服务等
5.webpack优化配置,网络优化,减少http请求,压缩静态资源文件,用浏览器的长缓存(强缓存,协商缓存)让应用的流量变小,加快加载速度等。(为什么webpack能减少http请求,长缓存 在下个章节会详细说明 02浏览器缓存和webpack缓存配置)
整个配置过程中我们都需要借助各种loader(可以理解成各种配置方案) 和 plugin(可以理解成vue的生命周期函数,打包运行到某一时刻做一些事情)
二 .总结:
webpack 是帮我们打包前端资源的,如css,js,图片 字体都是需要http 加载的
我们做前端项目的时候有经验 把很多的零碎的js打包在一起 这样我们可以减少http请求,同样我们
也希望使用模块化依赖,我们会做很多复用的代码写在一个模块里,而不是每个项目copy一份,到时候有个问题而不是每个项目的去修改一遍
webpack 只支持es5类型的语法 超出这类型之外的时候,需要配置module
三.前端的价值
现在不仅仅是局限于业务开发,vue-cli搭建的项目在很多公司上是不能跑起来的,很多定制化的是做不了的
搭建前端工程是很多必要的:数据缓存、es6和less(可以加快开发效率)
网络优化:加快http速度,缓存http请求,压缩静态资源文件
API定制:理解后端开发接口的流程
nodejs层:如前端工程的搭建,前端和后端之间再加一层nodejs层