Webpack

Posted 2020-09-26

　　Webpack是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

　　Webpack和其他模块化工具的区别：

　　一、代码拆分

　　Webpack有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。

　　二、Loader

　　Webpack本身只能处理原生的javascript模块，但是loader转换器可以将各种类型的资源转换为javascript模块。这样，任何资源都可以成为Webpack可以处理的模块。

　　三、智能解析

　　Webpack有一个智能解析器，几乎可以处理任何第三方库，无论他们的模块形式是CommonJS、AMD还是普通的JS文件。甚至在加载依赖的时候，允许使用动态表达式require("./templates/"+name+".jade")

　　四、插件系统

　　Webpack还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的Webpack插件，来满足各式各样的需求。

　　五、快速运行

　　Webpack使用异步I/O和多级缓存提高运行效率，这使得Webpack能够以令人难以置信的速度快速增量编译。

　　Webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换。

　　Loader可以理解为是模块和资源的转换器，它本身是一个函数，接收源文件作为参数，返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件，比如CoffeeScript、JSX、LESS或图片。

Loader的特性：

　　①：Loader可以通过管道方式链式调用，每个loader可以把资源转换成任意格式并传递给下一个loader，但是最后一个loader必须返回JavaScript

　　②：Loader可以同步或异步执行

　　③：Loader运行在nodejs环境中，所以可以做任何可能的事情

　　④：Loader可以接受参数，以此来传递配置项给loader

　　⑤：Loader可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。

　　⑥：Loader可以通过npm发布和安装

　　⑦：除了通过package.json的main指定，通常的模块也可以导出一个loader来使用

　　⑧：Loader可以访问配置

　　⑨：插件可以让loader拥有更多特性

　　⑩：Loader可以分发出附加的任意文件