深入浅出webpack学习(1)--核心概念

最新推荐文章于 2020-04-02 18:06:18 发布

转载最新推荐文章于 2020-04-02 18:06:18 发布 · 181 阅读

文章标签：

#webpack入门 #webpack API #webpack配置

webpack 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了Webpack的核心概念，包括Entry、Module、Chunk、Loader、Plugin和Output等，阐述了Webpack如何从Entry开始，递归解析依赖，通过Loader转换模块，并利用Plugin扩展逻辑，最终输出构建结果。

今天看到webpack配置入门的一个系列，感觉不错，作为查阅资料备存。
转载一波：
这是有关书籍地址：http://webpack.wuhaolin.cn/
这是我转载的地址：https://segmentfault.com/a/1190000013053658

核心概念

Entry：入口，webpack执行构建的第一步从Entry开始，可以抽象成输入。
Module：模块，在webpack中一切皆模块，一个模块对应着一个文件，webpack会从配置的Entry开始递归找出所有依赖的模块。
Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并和分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
Output：输出结果，在webpack经过一系列处理并得出最终想要的代码后输出结果。

webpack会在启动后从Entry里配置的Module开始递归解析Entry依赖的所有Module，每找到一个Module，就会根据配置的loader去找对应的转换规则，对Module进行转换后，再解析出当前Module依赖的Module。这些模块会以Entry为单位进行分组，一个Entry和其他所有依赖的Module被分到一个组就是一个Chunk。最后webpack会把所有Chunk转换成文件输出。在整个流程中webpack会在恰当的时机执行Plugin里定义的逻辑。

在实际开发中可能会遇到不同的场景，了解上面大致流程，在以后的开发中就会清楚的知道在对应的位置进行配置。