本篇是 webpack 系列的前言：先讲清楚前端工程化的发展脉络与模块化的来龙去脉，再进入后续 webpack 的具体知识。
阶段目标：前端原生项目工程化架构升级
- 完成前端原生 JS 项目升级：『模块化开发（webpack5）』＋『MVVM 框架（vue2 或 vue3）』。
- 掌握并实践 webpack 各种优化技巧。
- 掌握 vue2 和 vue3 框架搭建的原理和方法。
一、webpack 核心概念入门
bundle、chunk、loader、plugin等核心概念。- 项目源码分析和工程化痛点分析。
- 从原生到 webpack，从原生框架到 vue 框架。
二、历史回顾
前端工程化的发展，本质是「JS 能力边界」不断扩大、构建工具随之演进的过程。
| 时间 | 事件 | 阶段划分 |
|---|---|---|
| 1995 | Brendan Eich 发明 JavaScript | 前后端混合（1995-2005）：服务端渲染，JS 仅实现交互 |
| 2005 | Ajax 广泛应用 | ↑ |
| 2006 | jQuery 库出现 | ↑ |
| 2008 | V8 引擎发布，意味着 Ajax 可以在国内应用 | ↑ |
| 2009 | Node.js 发布，开启前端工程化新篇章 | 前后端分离（2005-2013）：借助 Ajax 实现前后端分离、SPA 等新模式 |
| 2010 | NPM 0.1 版本发布，模块化开发正式诞生 | ↑ |
| 2013 | webpack 1.0 发布、React 1.0 发布 | ↑ |
| 2014 | vue 1.0 发布，前端项目开始工程化，出现 grunt、gulp 等工具 | 模块化开发（2013-2014）：npm 管理模块，webpack 编译打包资源 |
| 2015 | 前端项目开始使用 CommonJS 规范，出现 browserify、webpack 等工具 | ↑ |
| 2016 | 前端项目开始使用 ES6 规范，出现 babel 等工具 | ↑ |
| 2017 | 前端项目开始使用 vue、react 等框架 | 模块化 + MVVM（2014-至今）：基于 react 或 vue 开发，手写 html 成为历史 |
| 2018 | 前端项目开始使用 vue3、react16 等框架 | ↑ |
| 2019 | 前端项目开始使用 TypeScript 等工具 | ↑ |
| 2020 | 前端项目开始使用 webpack5 等工具 | ↑ |
| 2021 | 前端项目开始使用 vue3 等框架 | ↑ |
| 2022 | 前端项目开始使用 vite 等工具 | ↑ |
三、前端模块化是什么？
- 将复杂程序根据规范拆分成若干模块，一个模块包含输出和输入。
- 模块的内部实现是私有的，对外暴露接口与其他模块通信。
- 一个 HTML 页面可以引用的 script 包括：脚本与模块。
四、前端模块化的进化过程
- 全局 function 模式：简单，但污染全局变量，容易导致命名冲突。
- 命名空间模式：用对象封装，减少了全局变量，但外部可以修改对象内容。
- IIFE 模式：用立即执行函数创建闭包，无法解决模块依赖问题。
- 匿名函数。
- 最后向 window 暴露该匿名函数的方法和变量。
- 修改只能调用修改变量对应的 getter 和 setter。
- CommonJS 模式：用
require和module.exports定义模块，解决了模块的定义问题，但只能在 Node.js 环境运行。 - AMD 模式：用
define和require定义模块，解决了模块的定义问题，但只能在浏览器环境运行。 - CMD 模式：用
define和require定义模块，解决了模块的定义问题，但只能在浏览器环境运行。 - ES6 模块模式：用
import和export定义模块，解决了模块的定义问题，可以在浏览器和 Node.js 环境运行。
