关于webpack常见的题目

2021-06-08 本文已影响0人云海成长

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 目录。