Web 开发中的利器 - Webpack（2）Webpack 简介

look_w

Webpack 简介Webpack is module bundler。有很多的文章将它说成是模块的打包工具，在我看来都有些偏颇。因为 package                是包裹的意思，而单词bundler却是：捆扎，收集，归拢的意思。因此我更倾向于将 module bundler                看作是"模块归集"。因为归集更能够体现了它作为模块系统的特性，它包含了分析模块间的相互依赖关系，将分散的各个文件打包成静态的资源文件（static                assets），以及处理文件之间的加载顺序与冲突等问题。
图 1.                    Webpack 是什么简单的总结一下，Webpack 是

• 模块加载工具
• 模块分析工具
• 模块打包工具

模块的加载->分析->打包，是 Webpack 有别于其他一些打包工具的最本质的区别。
模块加载
Webpack 通过 loader 的形式，统一了自身的数据模型，并将那些在应用中出现的资源（包括 css, images, fonts                等等）都统一成 javascript 对象，从而为模块的分析工作铺平了道路。
模块分析
Webpack 对这些 javascript 文件进行分析，形成语法树。进而了解模块之间的调用关系与层次。
Webpack 支持将模块进行拆分，形成 chunk ( chunk 包括静态与动态两种形式),                这样不仅可以保证项目在结构上的拆分，也可以支持动态的调用。尤其是动态 chunk 调用，将一些模块拆分成动态 chunk                ，这样既不会影响页面的初始化加载速度，同时应用本身也增加了"按需加载"的能力与特性。
Webpack 支持多种 javascript 语法书写形式（例如 CommonJS，AMD, ES6                等）。支持在应用中调用第三方框架与库文件（需要使用模块加载的兼容策略 - shimm modules），从而避免重新开发与实现。
模块打包
Webpack 支持多种打包工具，例如 gulp 和 grunt 。得益于其自身丰富的插件，让打包工作中的压缩，混淆以及对于测试（source                mapping 文件）的支持变得异常简单。