关于webpack常见的题目

1. webpack中的Module指的是什么？

webpack支持ESModule, CommonJS, AMD, assets(资源包括image, audio, video, json,font)

a. ESM

export/import

b. CommonJS

module.exports/require

c. AMD/CMD

define/require

// CMD
define(function(require, exports, module) {
   var a = require('./a')
   a.doSomething()   // 此处略去 100 行
   var b = require('./b') // 依赖可以就近书写
   b.doSomething()   //
 ... })
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) {  // 依赖必须一开始就写好
    a.doSomething()    // 此处略去 100 行
    b.doSomething()
 ...})

说明：package.json里面的type：module -> ESM; type: commonjs -> CommonJS

2. webpack中是如何表达各种依赖关系的？

ESM使用import
CommonJS使用reuquire
AMD使用require/define
css/less/sass 使用@import

3. 我们常说的chunk和bundle有什么区别？

a. chunk是打包过程中modules的集合，是打包过程中的概念，从一个入口模块开始，通过引用逐个打包各个模块，这些modules就形成了一个chunk

如果有多个入口，就有多个打包路径，每条路径都会形成一个chunk

b. bundle是打包输出的一个或多个文件，是打包结果的概念

c. chunk和bundle的关系是什么？

一般一个chunk对应一个bundle，如果加了source-map，则还会产生多一个bundle

d. split chunk

image.png

4. loader和plugin是做什么的？是怎么工作的

loader 模块转换器，将非js模块转换成浏览器能够识别的js模块。本质上，loader将所有文件类型转换成应用程序的依赖图可以直接引用的模块
plugin 扩展插件，以事件的形式执行，在webpack打包运行的各个阶段都会广播对应的事件，插件会监听事件
compiler 对象，包含了webpack环境的所有配置信息，包括loader,plugin,option,在webpack启动的时候实例化，在全局中是唯一的，可以理解为webpack实例(compiler = webpack(options))
complation 包含当前的模块资源，编译生成资源，webpack在开发模式运行的时候，每当检测到一个文件变化，就创建一次complation

5. webpack打包过程

具体来看打包的过程，Webpack 启动后，会根据我们的配置，找到项目中的某个指定文件（一般这个文件都会是一个 JS 文件）作为入口。然后顺着入口文件中的代码，根据代码中出现的 import（ES Modules）或者是 require（CommonJS）之类的语句，解析推断出来这个文件所依赖的资源模块，然后再分别去解析每个资源模块的依赖，周而复始，最后形成整个项目中所有用到的文件之间的依赖关系树
有了这个依赖关系树过后， Webpack 会遍历（递归）这个依赖树，找到每个节点对应的资源文件，然后根据配置选项中的 Loader 配置，交给对应的 Loader 去加载这个模块，最后将加载的结果放入 bundle.js（打包结果）中，从而实现整个项目的打包。

1） Webpack CLI 启动打包流程；
2）载入 Webpack 核心模块，创建 Compiler 对象；
3）使用 Compiler 对象开始编译整个项目；
4）从入口文件开始，解析模块依赖，形成依赖关系树；
5）递归依赖树，将每个模块交给对应的 Loader 处理；
6）合并 Loader 处理完的结果，将打包结果输出到 dist 目录。

最后编辑于：2021.06.10 14:56:21