关于前端:webpack入门级理解

57次阅读

共计 1755 个字符，预计需要花费 5 分钟才能阅读完成。

前端在开发时没法防止的会写出多个 js 文件，并且它们相互之间有着简单的依赖关系，如果这个时候间接发版到线上，浏览器每遇到一个 js 文件的时候都会发动 http 申请来获取资源，而后依此执行其中的代码。如果其中一个文件因为网络问题提早了，那么整个页面的显示也会被延误，显然对用户而言这是不敌对的。

这个时候咱们会想，如果只生成一个 js 文件就好了，这样的话缩小了 http 的申请，页面的展示会更加晦涩。然而这对开发者来说很不敌对，这个被汇合的 js 文件可能会存在成千上万行代码，后期开发和前期保护都是个大工程。

所以 webpack 打包工具的作用就凸现进去了，他的外围定位就是动态模块打包器，抽象来讲，它会帮咱们在开发实现后合并咱们的 js 文件。这样既缩小了浏览器的 http 申请次数，又让咱们的开发过程不受影响。

首先，咱们要晓得的是 webpack 只干了一件大事儿：递归构建了一个依赖关系图，并打包生成了一个或多个 bundle。

具体拆分下大抵可分为以下七个步骤：

graph TD
1. 初始化参数 --> 2. 开始编译  --> 3. 确定入口 --> 4. 编译模块 --> 5. 实现模块编译 --> 6. 输入资源 --> 7. 输入实现

初始化参数：从配置文件和 shell 语句中读取并合并参数，得出最终的参数。
开始编译：用上一步失去的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 办法，开始编译。
确定入口：依据配置中的 entry 找到所有的入口文件。
编译模块：从入口文件登程，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤，直到所有入口依赖的文件都通过了本步骤的解决。
实现模块编译：在通过第四步应用 loader 翻译完所有模块后，失去了每个模块被翻译后的最终内容，以及他们之间的依赖关系。
输入资源：依据入口和模块的依赖关系，组装成一个个蕴含多个模块的 chunk, 再把每个 chunk 转换成一个独自的文件输入到列表，这步是能够批改输入内容的最初机会。
输入实现：在确定好输入内容后，依据配置确定输入的门路和文件名，把文件内容写入到文件系统。

1.chunk

chunk 是 webpack 打包过程中 modules 的汇合，是打包过程中的概念。
webpack 的打包是从一个入口文件开始，入口模块引入其余模块，模块再援用模块。webpack 通过援用关系一一打包模块，这些 module 就造成了一个 chunk。当然如果有多个入口模块，可能会产出多条打包门路，每条门路都会生成一个 chunk.

2.bundle

bundle 是打包实现后最终输入的一个或者多个文件。

一句话总结
chunk 是打包过程中的代码块，bundle 是打包后果输入的代码块，chunk 在构建实现后就出现为 bundle。

1.compiler
一句话形容：简略了解为 webpack 实例
这个对象在 webpack 启动时被实例化，是全局惟一的。compiler 对蕴含了 webpack 环境所有的配置信息，蕴含 options，loaders,plugins 等信息。

2.compilation
compilation 蕴含了以后的模块资源，编译生成资源，变动的文件等。当 webpack 以开发模式运行时，每当检测到一个文件的变动，一次新的 compilation 就会被创立。compilation 对象也提供很多事件回调供插件做扩大。通过这个 compilation 也能够拜访到 compiler 对象。

3.loader
一句话形容：模块转换器，将非 js 模块转换为 webpack 可辨认的 js 模块。
loader 能够将所有类型的文件转换为 webpack 可能解决的模块，而后能够利用 webpack 的打包能力，对它们进行解决。实质上 webpack loader 将所有类型的文件，转换为应用程序的依赖图。

4.plugin
一句话形容：扩大插件。
在 webpack 运行的各个阶段都会播送进来相应的事件，插件能够监听到这些事件的产生，在特定的机会做相应的解决。