安徽网站制作公司,app代运营,做网站页面的需要哪些技巧,广西钦州有人帮做网站的公司吗「面试专栏」前端面试之Webpack篇#x1f9e9;序言#x1f3a8;一、基础知识学习#x1f3b2;二、常见面试题汇总#x1f3af;三、构建和打包1、前端代码如何进行构建和打包#xff1f;2、前端为何要进行打包和构建#xff1f;3、webpack原理#x1f3b0;四、模块相关1、… 「面试专栏」前端面试之Webpack篇序言一、基础知识学习二、常见面试题汇总三、构建和打包1、前端代码如何进行构建和打包2、前端为何要进行打包和构建3、webpack原理四、模块相关1、module chunk bundle 分别是什么意思有何区别2、source map是什么开发环境和生产环境如何使用3、如何引用一个自己编写的库lib第三方模块五、loader和plugin1、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 的一些基础知识进行总结归纳。详情见下图 对于以上内容周一有整理过 5 篇文章。戳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 、压缩代码、合并代码加载更快可以对高级语言或语法进行编译TS ES6 模块化、 scss 对代码的兼容性和错误进行检查 polyfill 、 postcss 、 eslint 。
从研发层面来说
使得研发有着更统一、高效的开发环境让项目组有着统一的构建流程和产出标准在提测和上线等流程中慢慢集成公司的构建规范。
3、webpack原理
首先需要先解析入口文件 entry 使用babel/parser 将其转为 AST(抽象语法树) 使用 babel/traverse 插件去找出入口文件中的所有 依赖模块 然后使用 babel/core 和 babel/preset-env 插件将入口文件的 AST 转为 Code 将 2 中找到的入口文件的依赖模块进行 遍历递归 重复执行 123 重写 require 函数并与 4 中生成的 递归关系图 一起输出到 bundle 中。 四、模块相关
1、module chunk bundle 分别是什么意思有何区别
module - 代表各个源码文件 webpack 中一切皆模块chunk - 表示多模块合并成的如 entry 、 import() 、 splitChunk bundle - 表示最终的输出文件。
2、source map是什么开发环境和生产环境如何使用
source map 是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性想要调试源码就需要 soucre map 。map 文件只要不打开开发者工具浏览器是不会加载的。下面给出在开发环境和生产环境下最适用的方式。
开发环境cheap-module-eval-source-map
生产环境cheap-module-source-map
注意点 避免在生产中使用 inline- 和 eval- 因为它们会增加 bundle 体积大小并降低整体性能。
3、如何引用一个自己编写的库lib第三方模块 在 output 中配置 filename 、 library 以及 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 可以说是一个扩展插件它用于在打包过程中的某些时刻里生效。常见的有 htmlWebpackPlugin 、 cleanWebpackPlugin 等等。
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 参数* errorError | null当 loader 出错时向外抛出一个 error* contentString | 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 环境种的所有配置信息包括 optionsloader 和 plugin和 webpack 整个生命周期相关的钩子。 compilation作为 plugin 内置事件回调函数的参数包含了当前的模块资源、编译生成资源、变化的文件以及被跟踪依赖的状态信息。当检测到一个文件变化一次新的 Compilation 将被创建。
3 如果自己要实现 plugin 也需要遵循一定的规范 插件必须是一个函数或者是一个包含 apply 方法的对象这样才能访问 compiler 实例。 传给每个插件的 compiler 和 compilation 对象都是同一个引用因此不建议修改。 异步的事件需要在插件处理完任务时去调用回调函数之后通知 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 是一个打包构建工具是多个 loader 和 plugin 的集合它关心模块化。
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() 语法。 使用 preloading 和 prefetching 来文件进行异步加载。 preload 与 prefetch 的区别在于 preload 是跟主文件同时进行加载而不是在主文件加载完才加载的。一般来说我们都用 prefetch 只有等主文件把活干完了再来加载剩余的我们想要的文件这样的逻辑和对页面的优化才是比较完美的。
2、webpack常见性能优化如何优化webpack的构建速度
1从开发环境的角度
生产环境优化
优化 babel-loader 使用 IgnorePlugin 排除掉一些不使用的模块且用来缩小打包作用域noParsehappyPack不维护了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 模块化语法。
八、结束语
在上面的文章中我们从构建和打包、模块相关、 loader 和 plugin 、 babel 、性能优化相关这五个方面对 webpack 的一些常见面试题进行了归纳总结。相信通过上文的学习大家对这一块的内容又有了一定的了解。关于 webpack 的常见面试题讲到这里就结束啦希望对大家有帮助~
如文章有误或有想要补充的内容欢迎留言或联系 vx:MondayLaboratory 。
最后就是祝各位看到这篇文章的小伙伴们都能够斩获到自己心仪的 offer 呀~
彩蛋 One More Thing
参考资料
再来一打Webpack面试题
腾讯面试官兄弟你说你会Webpack那说说他的原理
面试官说说Webpack中Loader和Plugin的区别编写LoaderPlugin的思路
pdf获取 微信搜索 星期一研究室 并关注回复关键词 webpack面试pdf 获取相关pdf内容~
回复 面试大全pdf 可获取整专栏内容️
更新地址 offer来了面试专栏
番外篇 关注公众号星期一研究室第一时间关注优质文章更多精选专栏待你解锁~如果这篇文章对你有用记得留个脚印jio再走哦~以上就是本文的全部内容我们下期见
