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

简介: 该文章系统地总结了Webpack从基础配置到高级配置的16个关键知识点,包括Loader与Plugin的工作机制、源代码映射(Source Map)的使用、模块划分策略、性能优化技巧等内容,并提供了实际配置示例帮助理解和应用。

封面

🧩序言

在前端的面试中, 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将指向 options
    const 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再走哦~
  • 以上就是本文的全部内容!我们下期见!👋👋👋
相关文章
|
6天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
22 5
|
8天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
33 7
|
10天前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例,以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法,能够更好地利用这一功能,提升项目的开发效率和性能表现。同时,要不断关注 Webpack 及相关技术的发展动态,以便及时掌握最新的热更新技术和最佳实践。
|
27天前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
68 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
7天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
21 2
|
10天前
|
存储 缓存 监控
配置 Webpack 5 持久化缓存时需要注意哪些安全问题?
【10月更文挑战第23天】通过全面、系统地分析和应对安全问题,能够更好地保障 Webpack 5 持久化缓存的安全,为项目的成功构建和运行提供坚实的安全基础。同时,要保持对安全技术的关注和学习,不断提升安全防范能力,以应对日益复杂的安全挑战。
|
22天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
46 1
|
22天前
|
前端开发 JavaScript
Webpack 中多个 Loader 的配置
【10月更文挑战第12天】使用多个 Loader 进行配置是 Webpack 中常见的操作,可以实现对各种资源的精细处理和优化。在配置时,需要根据具体需求合理选择和排列 Loader,并注意它们之间的顺序和交互关系。同时,不断了解和掌握新的 Loader 以及它们的特性,有助于更好地发挥 Webpack 的强大功能,提升项目的开发效率和质量。通过深入理解和熟练运用多个 Loader 的配置方法,你将能够更加灵活地处理各种资源,满足项目的多样化需求。
39 2
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
80 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
27天前
|
移动开发 JavaScript 前端开发
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
这篇文章主要介绍了如何通过配置Webpack的插件,如HtmlWebpackPlugin、uglifyjs-webpack-plugin和webpack-dev-server,来简化前端开发流程。
31 0
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发