前端工程化

入门前我以为的前端：

会写 HTML + CSS + JavaScript 就会前端开发
需要美化页面样式，就拽一个 bootstrap 过来
需要操作 DOM 或发起 Ajax 请求，再拽一个 jQuery 过来
需要渲染模板结构，就用 art-template 等模板引擎

实际意义

事实上，前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上，就是实现前端的“4 个现代化”：

模块化（js 的模块化、css 的模块化、其它资源的模块化）
组件化（复用现有的 UI 结构、样式、行为）
规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
自动化（自动化构建、自动部署、自动化测试）

前端工程化的好处

前端工程化让前端开发能够“自成体系”，覆盖了前端项目从创建到部署的方方面面
最大程度地提高了前端的开发效率，降低了技术选型、前后端联调等带来的协调沟通成本

前端工程化的解决方案

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

grunt
gulp

目前主流的前端工程化解决方案：

webpack 的基本使用

webpack 是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：目前企业级的前端项目开发中，绝大多数的项目都是基于 webpack 进行打包构建的。

mode的可选值

mode节点的可选值有两个，分别是：

development 开发环境不会对打包生成的文件进行代码压缩和性能优化打包速度快，适合在开发阶段使用
production 生产环境会对打包生成的文件进行代码压缩和性能优化打包速度很慢，仅适合在项目发布阶段使用

webpack.config.js文件的作用

webpack.config.js是webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

注意：由于webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack 的个性化配置。

webpack 中的默认约定

在 webpack 中有如下的默认约定：

默认的打包入口文件为 src -> index.js

默认的输出文件路径为 dist -> main.js

注意：可以在 webpack.config.js 中修改打包的默认约定

webpack 中的插件

通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的webpack插件有如下两个：

webpack-dev-server 类似于 node.js 阶段用到的 nodemon 工具每当修改了源代码，webpack 会自动进行项目的打包和构建
html-webpack-plugin webpack 中的 HTML 插件（类似于一个模板引擎插件）可以通过此插件自定制 index.html 页面的内容

webpack-dev-server

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。

html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。

需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份

webpack 中的 loader

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块， webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错

loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：

css-loader 可以打包处理 .css 相关的文件
less-loader 可以打包处理 .less 相关的文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

打包发布

项目开发完成之后，使用 webpack 对项目进行打包发布的主要原因有以下两点：

开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件
开发环境下，打包生成的文件不会进行代码压缩和性能优化为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布

企业级项目的打包发布

企业级的项目在进行打包发布时，远比刚才的方式要复杂的多，主要的发布流程如下：

生成打包报告，根据报告分析具体的优化方案
Tree-Shaking
为第三方库启用 CDN 加载
配置组件的按需加载
开启路由懒加载
自定制首页内容

Source Map

前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。此时就不可避免的产生了另一个问题：对压缩混淆之后的代码除错（debug）是一件极其困难的事情

Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着代码压缩混淆前后的对应关系。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试

最后

实际开发中需要自己配置 webpack 吗？

不需要

实际开发中会使命令行工具（俗称 CLI）一键生成带有 webpack 的项目
开箱即用，所有 webpack 配置项都是现成的
我们只需要知道 webpack 中的基本概念即可

第一次接触前端 - 前端工程化与 webpack