Skip to content
This repository was archived by the owner on Mar 22, 2019. It is now read-only.

what is webpack.cn

e-cloud edited this page Mar 18, 2016 · 1 revision

webpack is a module bundler.

webpack 是一个 模块打包工具

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

webpack处理带有依赖的模块,并生成代表这些模块的静态资源

modules with dependencies ---webpack---> static assets 带有依赖的模块 ---webpack---> 静态资源

Why another module bundler?

为什么又搞一套模块打包工具呢?

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.

现存的模块打包工具不是非常适合大项目(大型单页应用SPA)。再造轮子的最紧迫的原因是Code Splitting(代码分割),以及静态资源应该通过模块化无缝集成。

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

我试过扩展现存的打包工具,但却不能实现所有目标。

Goals

目标

  • Split the dependency tree into chunks loaded on demand

  • Keep initial loading time low

  • 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

  • Suited for big projects

  • 将依赖树拆分成可以按需加载的块

  • 保证初始加载时间足够低

  • 每个静态资源应该能作为一个模块

  • 将第三方库整合成模块的能力

  • 可以定制打包工具几乎每一部分的能力

  • 适用于大型项目

How is webpack different?

webpack又如何与众不同呢

Code Splitting(代码分割)

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 的依赖树模型中有两种类型的依赖:同步与异步。异步依赖作为分割点,会形成新的打包块。当打包块的树型结构被优化后,每个块都会生成一个文件。

Read more about Code Splitting. 详情参阅Code Splitting

Loaders(加载器)

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 原生只支持处理javascript代码,但是,加载器是用来将其他资源转化成javascript的表现形式。通过这样做,每一个资源都可构成一个模块。

Read more about Using loaders and Loaders. 详情参阅Using loaders and Loaders

Clever parsing

Clever parsing 智能解析

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.

webpack拥有一个智能解析器,可以处理几乎每一个第三方库。

Read more about expressions in dependencies, CommonJs and AMD。它甚至允许像这样require("./templates/" + name + ".jade")的依赖关系表达式。它处理最常见的模块化规范:CommonJSAMD

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.

webpack拥有丰富的插件系统。大多数的内部功能都基于这个插件系统。这允许你自定义webpack以满足你的需求,并分发开源的常用插件。

Read more about Plugins.

详情请参阅Plugins.

Clone this wiki locally