WdBly Blog

懂事、有趣、保持理智

WdBly Blog

懂事、有趣、保持理智

周维 | Jim

603927378@qq.com

webpack构建原理

webpack原理,基础概念,构建流程分析的精简版介绍,面试必备!

基础概念

  • Entry:webpack从该入口编译模块,并确定模块的依赖关系,Entry可以有多个。
  • Module:模块,在Webpack里一切皆模块,一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。
  • Chunk:代码块,一个Chunk由多个有依赖关系的模块组合而成,最终会输出成一个文件。
  • Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
  • Plugin:扩展插件,在 Webpack 构建流程中的特定时机会广播出对应的事件,插件可以监听这些事件的发生,在特定时机做对应的事情。

构建流程

1、初始化配置

从控制台和配置文件中读出配置,并组合成最终的配置文件。

2、初始化compiler对象

用上一步的配置初始化compiler对象,

3、确定入口

根据配置找到所有的入口文件Entry

4、用Loader递归编译模块

从入口文件开始,用Loader对模块进行编译,同时对其依赖的模块进行编译,递归此过程直至完成。

如当解析到依赖的模块是.vue的文件后,会使用vue-loader对此文件进行编译。

5、编译完成

模块编译完成后会得到所有编译好的模块以及这些模块的依赖关系。

6、输出资源

根据模块的依赖关系,将多个模块组合成一个个的Chunk,再将每一个Chunk添加到输出列表中。

在将Chunk添加的输出列表前,webpack会广播事件emit,此时是我们最后修改输出结果的时机。

7、输出完成

根据输出列表的文件路径和内容将文件写入文件系统。

在整个webpack编译项目的过程中,webpack会广播一系列的事件给插件,插件可以监听某些事件从而修改webpack的输出结果。

Loader

loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

loader参与模块的编译过程,loader本质上是一个node函数,它接受模块的内容参数,返回处理后的内容。

loader的职责一般来说是单一的,比如sass-loader将sass文件模块转化位css模块。 css-loader用于提取css模块中的依赖资源, style-loader将css模块转化为javascript代码。

Plugin

webpack的插件功能及其强大,可以用于执行范围很广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。

定义插件eg:

class TextPlugin{ // 接收配置 constructor(options){ console.log(options) // {a: 1} } // Webpack 会调用 TestPlugin的`apply`方法给插件实例传入 `compiler`对象 apply(compiler){ congsloe.log(compiler) } } // 导出 Plugin module.exports = TextPlugin;

要使用一个插件,只需要导入它,然后在plugin中添加它的实例:

plugins: [ new TextPlugin({a: 1}) ]

输出代码类型

在使用webpack构建的典型应用程序或站点中,有以下三种主要的代码类型:

  • 我们自己编写的业务代码
  • 依赖的三方库的vendor代码
  • webpack用于管理模块交互的runtimemanifest代码

runtimemanifest中保留了模块的详细信息,当项目在浏览器环境运行时,我们所使用的如importrequire等加载模块的方法都会转化为__webpack_require__方法。