webpack模块依赖管理介绍

2024-10-10 16:39:25

http://webpack.github.io/docs/

webpack is a module bundler.

是一个模块管理器
webpack可以管理模块的依赖关系，并产生可以替代这些模块的静态代码

已有方案 V.S. Webpack

<script>:

<script src="module1.js"></script>

<script src="module2.js"></script>

<script src="libaryA.js"></script>

<script src="module3.js"></script>

冲突，加载顺序，依赖，长且难于管理

commonjs（同步）：
- ```
require("module");

require("../file.js");

exports.doStuff = function() {};

module.exports = someValue;
```
- 网络同步请求块级调用不适用，多模块无法并行调用
- 实践：nodejs，browerify，modules-webmake（编译成为一个bundle），wrep（客户端）
AMD（异步）：

require(["module", "../file"], function(module, file) { /* ... */ });

define("mymodule", ["dep1", "dep2"], function(d1, d2) {

  return someExportedValue;

});

适用于网络异步模型，多模块并行加载
代码过重难于读写，更像是为了解决问题的变通方法

ES6 MODULES：
- ```
import "jquery";

export function doStuff() {}

module "localModule" {}
```
- 易于静态分析，确认为未来的ES标准
- 原生浏览器支持需要时间，仅有很少模块采用这种形式
webpack：
- 让开发者选择模块风格，允许已有代码正常运行，易于添加用户模块类型

模块转移方案：

模块需要在客户端运行，所以模块需要从服务端转移到浏览器端
两种极端的转移方法
- 一个请求一个模块
- - 优点：仅请求需要的模块
  - 缺点：多模块请求次数过多
  - 缺点：请求延时导致app打开过慢
- 一个请求所有模块
- - 优点：请求次数减少，请求延时减少
  - 缺点：不能够按需请求
模块组（chunked）转移：当编译所有模块时：将模块集合划分为多个小一些的模块组。
- 通过这种方法我们得到多个更小的请求，初始化时不需要的模块组可以按需请求，初始化请求不在包含完整模块代码并且变得更小了。
- 模块组的划分（代码分割）取决于开发者的需求并且是可选的。
- 大量代码库成为可能。
- GOOGLE’S GWT： http://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html
- 更多代码分割资料： http://webpack.github.io/docs/code-splitting.html

其他资源依赖管理支持：

资源
- 样式，图片，webfonts，html模板等
- coffeescript，less样式表，jade模板，i18n文件
解决方案： Using loaders 和 Loaders

静态分析：

当编译全部模块的时候，静态分析系统会尝试找到对应依赖
现状：通常该系统只能找到没有表达式的简单依赖，但是表达式方式确是很常见的require("./template/" + templateName + ".jade")
解决方案：智能解析器允许大部分的已有代码正常运行，即使开发者做了什么奇怪的事情，解析器也会找到兼容性最好的解决方案。

以上内容翻译整理自 http://webpack.github.io/docs/motivation.html

最新文章

热门文章