2 Webpack整体认知

Webpack整体认知

一个食品加工机器,输入原材料,经过一些列的步骤,最后产生出美味的食物。在中间加工环节我们可以添加各种佐料和提供多道工序来制作我们的食物,当食物产生完成之后我们可以扩展机器的功能实现自动打包装盒食物。

Webpack类似于一个食品加工机器,我们需要使用Entry指定输入材料,其中食物的物质形态转化过程,可以看作是Loader的使用,食物的佐料可以看作是Webpack中各种优化配置项,最后食物打包可以看作是Plugin的使用。这样我们对Webpack的整体运行流程有了一个整体的认识。

Webpack中需要掌握的核心概念

了解Webpack中的相关核心概念,有助于我们理解Webpack的工作流程。

Entry

Webpack开始构建的入口,根据入口指定的文件去解析和编译整个项目(输入)。

Module

在Webpack中万物皆模块,包括Webpack本身也是一个模块,JavaScript,Css,Img等资源都可以被Webpack(需要对应的Loader转换)当作模块使用,一个模块对应一个资源文件。Webpack会从Entry中递归找出所有的依赖模块。

Loader

Webpack默认是不识别Css,Img等非JavaScript类型的资源,使用Loader可以把这些资源根据需求转换成Webpack能够识别的新内容。

Plugin

扩展插件,实现了Loader不能实现的功能,提供了无限可能的附加功能,在Webpack的构建流程中使用插件,可以改变构建结果。(比如上面提到的食物打包装盒)

Chunk

代码块,一个代码块由一个或者多个模块组成,Node.js中的文件系统根据Chunk输出对应的文件。

Output

Output指定了Webpack最后输出结果的规范准则,即输出。

其他概念

上面介绍的几个核心概念在Webpack中都是有默认行为或者是默认配置的,使用者可以根据自己的实际需求进行配置,来满足不同场景的构建。

在Webpack中还有许多其他概念,非常有趣的是,这些概念中有些是可以物化的,即可以直接通过代码配置的。有些是抽象的概念,是Webpack中一些特定行为的抽象,这些其他概念最后都是为核心概念所服务的。

おすすめ

転載: blog.csdn.net/sinat_41212418/article/details/121388579