关于webpack常见的题目

时间:2021-6-12 作者:qvyue

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

关于webpack常见的题目
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 目录。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。