前端工程化与webpack

1 小白眼中的前端开发vs实际中的前端开发

小白眼中的前端开发

• 会写HTML+css +javascript 就会前端开发
• 需要美化页面样式，就用boostrap进行页面样式美化
• 需要操作DOM或发起Ajax请求，再用JQuery进行发送请求
• 需要快速实现网页布局效果，就使用Layui框架或使用element框架
  实际的前端开发:
• 模块化 (js 的模块化，css的模块化，资源的模块化)
• 组件化(服用现有的UI结构.样式，行为)
• 规范化(目录结构的划分,编码规范化,接口规范化,文档规范化,Git分支管理)
• 自动化(自动化构建，自动部署，自动化测试)

2 什么是前端工程化

前端工程化指的是:在企业级的前端项目开发中，把前端开发所需的工具,技术流程，经验等进行规范化.标准化。
企业中的Vue项目和React项目，都是基于工程化的方式进行开发的

好处:前端开发自成体系,有一套标准的开发方案和流程。

3 .前端工程化的解决方案

早期的前端工程化解决方案:

• grunt (https://www.gruntjs.net/)
• gulp(https://www.gulpjs.com.cn/)
  目前主流的前端工程化解决方案:
• webpack(https://www.webpackjs.com/)
• parcel(https:/zh.parceljs.org/)

什么是webpack

概念:webpack是前端项目工程化的具体解决方案。
主要功能:它提供了友好的前端模块化支持,以及代码压缩混淆
处理浏览器javascript的兼容性.性能化等强大的功能

好处：让程序员把工作的重心放到具体的实现上,提高了前端开发效率和项目的可维护性。
注意:目前Vue React等前端项目，基本都是基于webpack进行工程化开发的。