「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系

封面

「面试专栏」前端面试之Webpack篇

  • 🧩序言
  • 🎨一、基础知识学习
  • 🎲二、常见面试题汇总
  • 🎯三、构建和打包
    • 1、前端代码如何进行构建和打包?
    • 2、前端为何要进行打包和构建?
    • 3、webpack原理
  • 🎰四、模块相关
    • 1、module chunk bundle 分别是什么意思,有何区别?
    • 2、source map是什么?开发环境和生产环境如何使用?
    • 3、如何引用一个自己编写的库lib(第三方模块)
  • 🧶五、loader和plugin
    • 1、webpack中常见的loader有哪些
    • 2、webpaack中常见的plugin有哪些
    • 3、loader和plugin的区别?
    • 4、是否写过Loader?简单描述一下编写loader的思路?
    • 5、是否写过Plugin?简单描述一下编写plugin的思路?
  • 🥁六、babel相关
    • 1、babel和webpack的区别
    • 2、babel-polyfill和babel-runtime的区别
    • 3、为何Proxy不能被Polyfill?
  • 🥊七、性能优化相关
    • 1、webpack如何实现懒加载?
    • 2、webpack常见性能优化(如何优化webpack的构建速度?)
      • (1)从开发环境的角度
      • (2)从产出代码的角度
  • 🎬八、结束语
  • 🐣彩蛋 One More Thing
    • (:参考资料
    • (:pdf获取
    • (:更新地址
    • (:番外篇

🧩序言

在前端的面试中, webpack 也是面试官考察的重点之一。如果说候选人不会 webpack ,从某种层面上来说不会特别影响面试官最终的面试结果。但从某种意义上来说,候选人给面试官的印象分就会稍微折扣了一点点。所以呢,以不变应万变,还是抓紧时间复盘学习,应变面试官有可能涉及到的各种问题。

那么在接下来的这篇文章当中呢,将梳理 webpack 的基础知识,以及将对常见面试题进行汇总和解答。一起来学习吧~😝

🎨一、基础知识学习

我们先用一张思维导图来对 webpack 的一些基础知识进行总结归纳。详情见下图👇

webpack基础知识思维导图

对于以上内容,周一有整理过 5 篇文章。戳webpack基础知识传送门

大家可以到专栏进行学习查看,同时,如果想对 webpack 有一个系统一点的学习的话,推荐给大家可以直接看 《Webpack实战:入门、进阶与调优》这本书。

这本书相对来说对入门选手会友好一点,也是周一刚学习时看的一本书。其他书我也还没看过……等以后再来补充。

基础知识学会了,那么我们继续来看下比较常见的一些面试题汇总和解答~

🎲二、常见面试题汇总

同样地,我们先用一张思维导图来了解 webpack 中常见的一些面试题。详情见下图👇

webpack常见面试题汇总

现在我们来对这些问题进行一一解答。

🎯三、构建和打包

1、前端代码如何进行构建和打包?

Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:

  • 初始化参数: 从配置文件和 Shell 语句中q去读取与合并参数,得出最终的参数;
  • 开始编译: 用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;
  • 确定入口: 根据配置中的 entry 找出所有的入口文件;
  • 编译模块:入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
  • 完成模块编译: 在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
  • 输出资源: 根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk ,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;
  • 输出完成: 在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统;

在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 来改变 Webpack 的运行结果。

简单来说:

  • 初始化参数: 启动构建,读取与合并配置参数,加载 Plugin ,实例化 Compiler
  • 编译模块:Entry 出发,针对每个 Module 串行调用对应的 Loader 去翻译文件的内容,再找到该 Module 依赖的 Module ,递归地进行编译处理;
  • 完成输出: 将编译后的 Module 组合成 Chunk,将 Chunk 转换成文件,输出到文件系统中。

2、前端为何要进行打包和构建?

从代码层面来说:

  • 进行构建和打包后的项目体体积更小( Tree-Shaking 、压缩代码、合并代码,加载更快);
  • 可以对高级语言或语法进行编译(TSES6+ ,模块化、 scss );
  • 对代码的兼容性和错误进行检查( polyfillpostcsseslint )。

从研发层面来说:

  • 使得研发有着更统一、高效的开发环境;
  • 让项目组有着统一的构建流程和产出标准;
  • 在提测和上线等流程中慢慢集成公司的构建规范。

3、webpack原理

  • 首先需要先解析入口文件 entry ,使用@babel/parser ,将其转为 AST(抽象语法树)
  • 使用 @babel/traverse 插件,去找出入口文件中的所有 依赖模块
  • 然后使用 @babel/core+@babel/preset-env 插件,将入口文件的 AST 转为 Code
  • 2 中找到的入口文件的依赖模块,进行 遍历递归 ,重复执行 1,2,3
  • 重写 require 函数,并与 4 中生成的 递归关系图 一起,输出到 bundle 中。

webpack原理

🎰四、模块相关

1、module chunk bundle 分别是什么意思,有何区别?

  • module - 代表各个源码文件webpack 中一切皆模块;
  • chunk - 表示多模块合并成的,如 entryimport()splitChunk
  • bundle - 表示最终的输出文件。

2、source map是什么?开发环境和生产环境如何使用?

source map 是将编译打包压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性,想要调试源码就需要 soucre mapmap 文件只要不打开开发者工具,浏览器是不会加载的。下面给出在开发环境和生产环境下最适用的方式。

开发环境:cheap-module-eval-source-map

生产环境:cheap-module-source-map

注意点: 避免在生产中使用 inline-eval- ,因为它们会增加 bundle 体积大小,并降低整体性能。

3、如何引用一个自己编写的库lib(第三方模块)

  • output 中配置 filenamelibrary 以及 libraryTarget 等项,来引用自己编写的第三方库;

  • 解决库引用冲突:externals

🧶五、loader和plugin

1、webpack中常见的loader有哪些

  • file-loader:常用于处理图片和字体,旨在把文件输出到一个文件夹中,之后在代码中通过相对的 url 去引用输出的文件。
  • url-loader:常用于处理图片和字体,与 file-loader 类似,两个的区别在于,对于 url-loader 来说,用户可以设置一个阈值,当大于阈值时会交给 file-loader 处理,小于阈值时返回文件 base64 形式编码。
  • css-loader:用于加载 CSS 文件,支持模块化压缩文件导入等特性。
  • style-loader:用于把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS
  • sass-loader:用于将 SCSS/SASS 代码转换成 CSS 代码。
  • postcss-loader:解决兼容性问题,扩展 CSS 语法,使用下一代 CSS ,可以配合 autoprefixer 插件自动补齐 CSS3 的厂商前缀。

2、webpaack中常见的plugin有哪些

  • html-webpack-plugin:自动创建一个新的 html 文件,并把打包生成的 js 文件自动引入到这个 html 文件中。

  • clean-webpack-plugin:清空指定目录或者文件夹。

  • ignore-plugin:忽略部分文件。

  • splitChunkPlugin:对 js 文件进行代码分割。

  • mini-css-extract-plugin:对 css 文件进行代码分割,对于分割后的代码来说,支持按需加载。

  • optimize-css-assets-webpack-plugin:用于压缩 css 文件,减少 css 文件的大小。

3、loader和plugin的区别?

  • loader ,可以说是一个模块转换器,用于处理我们引用的模块。比如说,我们想要去引入一个 js 文件,或者是 css 格式的文件,都需要 loader 来帮助我们处理。
  • plugin ,可以说是一个扩展插件,它用于在打包过程中的某些时刻里生效。常见的有 htmlWebpackPlugincleanWebpackPlugin 等等。

4、是否写过Loader?简单描述一下编写loader的思路?

  • 其本质为函数,函数中的 this 将会被作为上下文来提供给 webpack 填充,因此我们不能将 loader 设为一个箭头函数

  • 函数接受一个参数,这个参数为 webpack 传递给 loader 的文件源内容;

  • 函数中 this 是由 webpack 提供的对象,能够获取当前 loader 所需要的各种信息;

  • 函数中有异步操作或同步操作,异步操作通过 this.callback 返回,返回值要求为 string 或者 Buffer

代码如下所示:

// 导出一个函数,source为webpack传递给loader的文件源内容
module.exports = function(source) {const content = doSomeThing2JsString(source);// 如果 loader 配置了 options 对象,那么this.query将指向 optionsconst options = this.query;// 可以用作解析其他模块路径的上下文console.log('this.context');/** this.callback 参数:* error:Error | null,当 loader 出错时向外抛出一个 error* content:String | Buffer,经过 loader 编译后需要导出的内容* sourceMap:为方便调试生成的编译后内容的 source map* ast:本次编译生成的 AST 静态语法树,之后执行的 loader 可以直接使用这个 AST,进而省去重复生成 AST 的过程*/this.callback(null, content); // 异步return content; // 同步
}

5、是否写过Plugin?简单描述一下编写plugin的思路?

(1) 由于webpack基于发布订阅模式,在运行的生命周期中会广播出许多事件,插件通过监听这些事件,就可以在特定的阶段来执行自己的插件任务。

(2) webpack 编译会创建两个核心对象:

  • compiler:包含了 webpack 环境种的所有配置信息,包括 optionsloaderplugin,和 webpack 整个生命周期相关的钩子。

  • compilation:作为 plugin 内置事件回调函数的参数,包含了当前的模块资源、编译生成资源、变化的文件以及被跟踪依赖的状态信息。当检测到一个文件变化,一次新的 Compilation 将被创建。

(3) 如果自己要实现 plugin ,也需要遵循一定的规范:

  • 插件必须是一个函数或者是一个包含 apply 方法的对象,这样才能访问 compiler 实例。

  • 传给每个插件的 compilercompilation 对象都是同一个引用,因此不建议修改。

  • 异步的事件需要在插件处理完任务时去调用回调函数,之后通知 Webpack 进入下一个流程,否则会卡住。

(4) 实现plugin的模板如下:

class MyPlugin {// Webpack 会调用 MyPlugin 实例的 apply 方法给插件实例传入 compiler 对象apply (compiler) {// 找到合适的事件钩子,实现自己的插件功能compiler.hooks.emit.tap('MyPlugin', compilation => {// compilation: 当前打包构建流程的上下文console.log(compilation);// do something...})}
}

🥁六、babel相关

1、babel和webpack的区别

  • babel ,编译 JS 新语法的一个工具,它不关心模块化
  • webpack ,是一个打包构建工具,是多个 loaderplugin 的集合,它关心模块化。

2、babel-polyfill和babel-runtime的区别

  • babel-polyfill ,旨在解决低版本浏览器无法兼容 ES6 的部分新的语法变量的问题,但它有一个缺点就是会污染全局,即 @babel/preset-env 会将 Promise 翻译成全局变量 var _Promise
  • babel-runtime不会污染全局babel-runtime 提供了单独的包,用以提供编译模块的工具函数。启用插件 babel-plugin-transform-runtime 后, Babel 就会使用 babel-runtime 下的工具函数。
  • 同时,值得注意的是,当引用自己编写的第三方库 lib 时,要用 babel-runtime

3、为何Proxy不能被Polyfill?

  • Proxy 没有办法被 polyfill ,也就是说低版本浏览器无法兼容一些新的语法变量,所以这也是我们常说的为啥 vue3 无法兼容低版本浏览器。

  • class 可以用 function 模拟, Promise 可以用 callback 来模拟,但 Proxy 的功能用 Object.defineProperty 就无法模拟了,所以 vue3 暂时无法减容低版本浏览器。

🥊七、性能优化相关

1、webpack如何实现懒加载?

  • import() 语法。

  • 使用 preloadingprefetching 来文件进行异步加载。

  • preloadprefetch 的区别在于: preload 是跟主文件同时进行加载,而不是在主文件加载完才加载的。一般来说,我们都用 prefetch , 只有等主文件把活干完了,再来加载剩余的我们想要的文件,这样的逻辑和对页面的优化才是比较完美的。

2、webpack常见性能优化(如何优化webpack的构建速度?)

(1)从开发环境的角度

生产环境优化:

  • 优化 babel-loader
  • 使用 IgnorePlugin ,排除掉一些不使用的模块,且用来缩小打包作用域
  • noParse;
  • happyPack(不维护了);
  • ParallelUglifyPlugin。

开发环境优化:

  • 自动刷新:使用 webpackDevServer 来实现自动刷新编译结果
  • 热模块更新HMR:热更新又称热替换, 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块
  • DllPlugin:使用 DllPlugin 进行分包,使用 DllReferencePlugin (索引链接) 对 manifest.json 引用,让一些基本不会改动的代码先打包成静态资源,避免反复编译浪费时间。

(2)从产出代码的角度

  • 懒加载;
  • 提取公共代码;
  • 使用 cdn 加速;
  • IgnorePlugin
  • 使用 production
  • 使用 url-loader 对小图片进行 base64 编码;
  • 对生成的 bundle 文件加 hash 值;
  • Scope Hosting:
    • 构建后的代码会存在大量闭包,造成体积增大,运行代码时创建的函数作用域变多,内存开销变大。
    • Scope hoisting 将所有模块的代码按照引用顺序放在一个函数作用域里,然后适当的重命名一些变量以防止变量名冲突.
    • 同时,必须是 ES6 的语法,因为有很多第三方库仍采用 CommonJS 语法。
    • 因此,为了充分发挥 Scope hoisting 的作用,需要配置 mainFields 对第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法。

🎬八、结束语

在上面的文章中,我们从构建和打包、模块相关、 loaderpluginbabel 、性能优化相关这五个方面,对 webpack 的一些常见面试题进行了归纳总结。相信通过上文的学习,大家对这一块的内容又有了一定的了解。关于 webpack 的常见面试题讲到这里就结束啦!希望对大家有帮助~

如文章有误或有想要补充的内容,欢迎留言或联系 vx:MondayLaboratory

最后就是祝各位看到这篇文章的小伙伴们,都能够斩获到自己心仪的 offer 呀~🥂🥂🥂

🐣彩蛋 One More Thing

(:参考资料

👉再来一打Webpack面试题

👉腾讯面试官:兄弟,你说你会Webpack,那说说他的原理?

👉面试官:说说Webpack中Loader和Plugin的区别?编写Loader,Plugin的思路?

(:pdf获取

👉 微信搜索 星期一研究室 并关注,回复关键词 webpack面试pdf 获取相关pdf内容~

👉回复 面试大全pdf 可获取整专栏内容🗂️

(:更新地址

👉 offer来了面试专栏

(:番外篇

  • 关注公众号星期一研究室,第一时间关注优质文章,更多精选专栏待你解锁~
  • 如果这篇文章对你有用,记得留个脚印jio再走哦~
  • 以上就是本文的全部内容!我们下期见!👋👋👋

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/307818.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

进击吧!Blazor!第一期回顾

Blazor 是一个 Web UI 框架,可通过 WebAssembly 在任意浏览器中运行 .Net 。Blazor 旨在简化快速的单页面 .Net 浏览器应用的构建过程,它虽然使用了诸如 CSS 和 HTML 之类的 Web 技术,但它使用 C#语言和 Razor 语法代替 JavaScrip…

《五分钟商学院》个人篇学习总结(下)

【商业知识】| 作者 / Edison Zhou这是EdisonTalk的第286篇原创内容商业篇聚焦的是我们与外部的关系,管理篇聚焦的是我们与内部的关系,而个人篇聚焦的则是我们与自己的关系。与自己斗,其乐无穷,本文是个人篇的下半部分学习总结。上…

「软件项目管理」软件项目范围计划——需求管理与任务分解

软件项目范围计划——需求管理与任务分解序言一、软件需求定义及层次1、定义2、层次二、软件需求管理过程1、管理过程2、需求获取3、需求分析4、需求规格编写5、需求验证6、需求变更(1)需求变更管理的主要工作(2)需求变更控制流程…

leetcode106. 从中序与后序遍历序列构造二叉树

一:题目 二:思路 例子:中序[9,3,15,20,7];后序[9,15,7,20,3] 1.我们先选取后续的最后的结点3(其是根节点) 2.我们在中序序列中用上一步求出的根节点3并记录其在中序数组中的位置rootin,然后我们就可以 求出 左子树的结点个数(rootin - leftin…

「offer来了」快来关注这些性能优化问题

「面试专栏」前端面试之性能优化篇💬序言💯思维导图抢先看👁️‍🗨️一、html、css、js、jq优化1、针对HTML,如何优化性能?2、针对CSS,如何优化性能?3、哪些方法能提升移动端CSS3动画…

不宜过分炒作第三代半导体材料弯道超车

目前,本土晶圆大厂与台积电在技术水平上的差距是非常明显的。就市场份额来说,台积电的市场份额超过50%,而本土晶圆大厂的市场份额大约是台积电的十分之一。在技术水平上,本土晶圆大厂也和台积电这样的大厂有一定差距。目前台积电7…

「offer来了」浅谈前端面试中开发环境常考知识点

「面试专栏」前端面试之开发环境篇🌱序言🌲一、git1、为什么要使用git?2、常用的git命令3、git提交规范🌳 二、Chrome调试工具🌴三、抓包1、抓包工具2、抓包过程🌾四、linux 常用命令1、为什么要用linux?2…

数据结构与算法专题——第十题 输入法跳不过的坎-伸展树

我们知道AVL树为了保持严格的平衡,所以在数据插入上会呈现过多的旋转,影响了插入和删除的性能,此时AVL的一个变种伸展树(Splay)就应运而生了,我们知道万事万物都遵循一个“八二原则“,也就是说8…

「软件项目管理」一文详解软件项目成本计划

软件项目成本计划序言一、成本估算的定义二、估算的基本概念1、关于估算2、软件项目规模3、软件规模单位4、软件项目成本5、成本单位6、软件规模和软件成本的关系7、成本估算结果三、成本估算过程1、估算输入2、估算处理3、估算输出四、成本估算方法1、代码行估算法&#xff08…

在腾讯云云函数计算上部署.NET Core 3.1

云厂商(腾讯云、Azure等)提供了Serverless服务,借助于Serverless,开发人员可以更加专注于代码的开发,减少运维的成本。腾讯云的函数计算提供了很多运行库,对.NET的支持需要通过custom runtime 来支持&#…

MassTransit Get Started-

MassTransit:是一款.NET的分布式应用程序框架(开源、免费)。通过MassTransit,可以轻松创建利用基于消息的、松耦合异步通信的应用程序和服务,以提高可用性,可靠性和可伸缩性。MassTransit本身定位轻量级的服…

「软件项目管理」成本估算模型——Walston-Felix模型和COCOMO Ⅱ模型

Walston-Felix模型和COCOMO Ⅱ模型序言一、Walston-Felix模型1. 公式2. 举例二、COCOMO模型(Constructive Cost Model)1. 模型定义2. COCOMO模型的发展3. COCOMO基本原理三、COCOMO 811. 模型级别2. 项目类型3. 基本COCOMO-81(1)公…

图书管理(SSM)

一:前言 这仅仅是个小demo,体验了一把SSM配置地狱&#xff0c;就简单的实现CRUD 二:相关技术 MybatisSpringSpringMVCMysqlMavenTomcat 三:功能展示 1:查询 2:增加 3:删除 4&#xff1a;修改 四:上码 1&#xff1a;导入依赖 <?xml version"1.0" encoding&…

ASP.NET Core Cookie SameSite

在较多的项目中&#xff0c;Cookie 是比较常用的一种状态保持的选择。比如常见的例子&#xff1a;用户登录成功后&#xff0c;服务器通过 set-cookie 将会话Id设置到当前域下&#xff0c;前端在调用后端接口时&#xff0c;会自动将同域下的 Cookie 携带上&#xff0c;然后后端接…

还不会ts?一文带你打开ts的大门

一文带你打开ts的大门序言一、什么是TypeScript&#xff1f;1、编程语言的类型2、TypeScript究竟是什么&#xff1f;二、为什么要学习TypeScript&#xff1f;1、程序更容易理解2、效率更高3、更少的错误4、非常好的包容性5、一点小缺点三、typescript入门1、如何安装TypeScript…

idea中右侧的Maven框消失了

我掉 芭比Q了 idea中右侧的maven框居然没了 消失不见了 跟一束烟似的 没了 解决&#xff08;网上找的&#xff09;

「软件项目管理」一文详解软件项目进度计划

软件项目进度计划序言一、进度及任务的定义1. 进度2. 任务3. 产品和任务的关系二、任务关联关系1. 定义2. 任务(活动)之间的关系3. 任务关系矩阵4. 任务关联关系的依据三、进度管理图示1. 甘特图2. 网络图&#xff08;1&#xff09;定义&#xff08;2&#xff09;常用的网络图Ⅰ…

过年烟花特效

一&#xff1a;前言 过年了 菜鸡杰 在这给CSDN的伙计们拜年了 这一段时间以来 我特别感谢 我的粉丝 正是因为有你们的陪伴 所以我才会很大动力 去写博客&#xff0c;所以我就准备了一个特效给粉丝们 现在过年不让放烟花 我就改了个代码 改成烟花特效 送给大家 二:特效描述 这…

「软件项目管理」一文详解软件项目质量计划

一文详解软件项目质量计划&#x1f3a9;前言&#x1f452;一、质量概述1. 质量与软件质量2. 质量成本二、质量模型1. 定义2. 几种模型3. 模型解读&#xff08;1&#xff09;Bohem质量模型&#xff08;2&#xff09;McCall质量模型&#xff08;3&#xff09;ISO/IEC 9126质量模型…

WSL2 支持挂载物理磁盘,Windows 可直接访问 ext4

喜欢就关注我们吧&#xff01;最新的 Windows Insiders Preview Build 为 WSL2 的命令行程序增加了新功能&#xff1a;wsl --mount&#xff0c;这个新参数支持在 WSL2 添加和挂载物理磁盘&#xff0c;用户通过它能访问 Windows 没有原生支持的 Linux 文件系统&#xff08;例如 …