WebPack系列教程(三):什么是WebPack

时间:2022-12-19 15:12:28

webpack是一个模块打包器

webpack模块根据之间的依赖,打包生成最终代表那些模块的静态资源。

WebPack系列教程(三):什么是WebPack

为什么还需要重新做一个模块打包器

已经存在的模块打包器不适合于大型项目(如大型的单页应用程序)。我们开发另一个模块加载器最直接的原因就是代码拆分和模块化的静态资源需要无缝集成。

我试图扩展已经存在的模块打包器,但是它们很难达到所有的预期。

目标

  • 拆分依赖树到按需加载的分块当中;
  • 保证初始加载时间低;
  • 所有静态资源都能作为模块;
  • 能集成第三方库作为模块;
  • 能自定义模块打包器几乎所有的过程;
  • 适合大型项目;

webpack有哪些不一样的地方?

代码拆分

在webpack的依赖树中存在两种依赖方式:同步和异步。异步依赖根据拆分点形成新的分块。当这些分块树被优化后,模块文件就被分发到各个分块中。

阅读更多关于代码拆分

Loaders

webpack本身只能处理javascript,但是loaders 能将其他资源转换为javascript。通过这种方式所有资源都形成了模块。

阅读更多关于Using-LoadersLoaders

Clever parsing

webpack有一个很强大的解析器,它能处理几乎所有的第三方库。它甚至允许依赖当中存在表达式,像require("./templates/" + name + ".jade");它能处理几乎所有的模块加载方式:CommonJsAMD

阅读更多关于expressions in dependenciesCommonJsAMD

插件系统

webpack的特色是有丰富的插件系统。webpack的许多内部特性都是基于插件系统的。插件系统允许你根据需要自定义webpack,并通过开源分发自己的插件。

阅读更多关于插件