首页 > 代码库 > Webpack
Webpack
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可以分发出附加的任意文件
Webpack