Webpack 出现前后历史过往

入门

模块化

随着前端的发展，原生的代码处理方式应对大型项目时越来越不方便

这时出现了模块化的思想，目的是将一个复杂的系统分解为多个模块以方便编码

最早的方式是通过命名空间来组织代码，例如 jQuery 将其 API 放在了 window.$ 下，但是这样很容易出现命名空间冲突，且依赖的版本以及加载顺序不好管理

后来出现了 CommonJS 规范，Node.js 采用了这种方式，但是这样的代码不能直接在浏览器中运行，必须转换成 ES5

AMD 规范，主要解决浏览器环境模块化问题（代表性实现：requirejs），它使用了异步的方法加载依赖的模块，不过它的使用需要先导入第三方库

ES6 模块化，是模块化的终极方案，但是为了向下兼容 ES5 很多时候还需要转换一下

不仅仅 JS 能够模块化，样式文件例如 CSS 也能够使用模块化 @import 导入

常见的工具对比

构建就是将不能直接在浏览器环境或者应用场景下运行的代码转换为可以直接运行的代码，总的来说包括以下内容：代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布

1、Npm Script

属于 package.json 中 script 字段，node.js 附带的包管理器 npm 可以识别并执行，原理是调用 Shell 执行

但是其功能太过简单，不能管理多个任务之间的依赖

2、Grunt

和 Npm Script 类似，其自身有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化执行依赖的任务，任务相关配置和依赖关系通过配置文件 Gruntfile.js 配置

但其缺点是只弥补 Npm Script 的不足，相当于 Npm Script 的进化版

3、Gulp

基于流的自动化构建工具，通过五种方法几乎可以支持所有的场景：

• gulp.task，注册任务
• gulp.run，执行任务
• gulp.watch，监听文件变化
• gulp.src，读取文件
• gulp.dest，写文件

其特点是引入了流的概念，流可以在插件之间传递，相当于文件处理后可以继续传递到下一个插件中

但是 Grunt 集成度不高， 要写很多配置

4、Fis3

来自于百度，它集成了 web 开发中常用的构建功能：

• 读写文件
• 资源定位：解析文件之间的依赖关系和文件位置
• 文件指纹：通过 useHash 配置在输出文件时为文件 URL 加上 md5 戳，优化浏览器缓存
• 文件编译：通过 parser 配置文件解析器做文件转换
• 压缩资源：通过 optimizer 配置代码压缩方法
• 图片合并：通过 spriter 配置合并 css 里导入的图片到一个文件中，来减少 HTTP 请求数

该构建工具已经不再维护更新，不支持最新版本的 node.js

5、Webpack

是一个打包模块化 JavaScript 的工具，一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出多个模块组合成的文件

其优点是：

• 专注于处理模块化的项目，能做到开箱即用
• 可通过 Plugin 扩展
• 使用场景不限于 web 开发
• 社区庞大

6、Rollup

是一个和 Webpack 很类似但专注于 ES6 的模块打包工具，它能针对 ES6 的源码进行 Tree Shaking（像摇晃树上没用的落叶一样），去除那些已经被定义但是没有被使用的代码并进行 Scope Hoisting，以减小输出文件的大小，但是随后就被 Webpack 模仿实现，其本质和 Webpack 相差无几，差别如下：

• Rollup 是 Webpack 出现后的替代品
• Rollup 生态链不完善
• Rollup 功能不如 Webpack 完善，但是配置和使用更简单
• Rollup 不支持 Code Spliting，但打包出来没有 Webpack 那段模块加载、执行、缓存的代码

其在用来打包 JavaScript 库时比 Webpack 更有优势，因为打包出来的代码更小