前端工程化

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

小白眼中的前端开发：

 会 写 HTML + CSS + JavaScript 就会前端开发

 需要美化页面样式， 就 拽一 个 bootstrap 过来

 需要操 作 DOM 或发 起 Ajax 请求，再拽一 个 jQuery 过来

 需要快速实现网页布 局 效果 ， 就 拽 一个 Layui 过来

实际的前端开发遵循4个现代化：

模块化 （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/ ）