前端工程化与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进行工程化开发的。

上一篇:Jmeter 引入 jar 包的坑


下一篇:分布式事务框架-seata初识