什么是webpack?

webpack是一个模块打包器.

webpack takes modules with dependencies and generates static assets representing those modules.

为什么要另一个模块打包器?

Existing module bundlers are not well suited for big projects (big single page applications). The most pressing reason for developing another module bundler was [[Code Splitting]] and that static assets should fit seamlessly together through modularization.

I tried to extend existing module bundlers, but it wasn't possible to achieve all goals.

目标

• 把依赖树分割成块以便按需加载
• 保持较低的初始加载时间
• Every static asset should be able to be a module
• Ability to integrate 3rd-party libraries as modules
• Ability to customize nearly every part of the module bundler
• 适合大型项目

有什么不同?

代码分离

webpack has two types of dependencies in its dependency tree: sync and async. Async dependencies act as split points and form a new chunk. After the chunk tree is optimized, a file is emitted for each chunk.

阅读更多关代码分离.

加载器

webpack can only process JavaScript natively, but loaders are used to transform other resources into JavaScript. By doing so, every resource forms a module.

阅读更多关使用加载器和加载器.

聪明解析

webpack has a clever parser that can process nearly every 3rd party library. It even allows expressions in dependencies like so require("./templates/" + name + ".jade"). It handles the most common module styles: [[CommonJs]] and [[AMD]].

阅读更多关表达式的依赖关系, CommonJs和AMD.

插件系统

webpack features a rich plugin system. Most internal features are based on this plugin system. This allows you to customize webpack for your needs and distribute common plugins as open source.

阅读更多关于插件.