01 为什么需要使用webpack开发？

我们常常谈论使用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层