webpack模块依赖管理介绍

时间:2023-03-09 02:35:22
webpack模块依赖管理介绍
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)转移:当编译所有模块时:将模块集合划分为多个小一些的模块组。

其他资源依赖管理支持:
  • 资源
    • 样式,图片,webfonts,html模板等
    • coffeescript,less样式表,jade模板,i18n文件
  • 解决方案: Using loaders 和 Loaders

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

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