WebPack面试题总结(1),2024华为Web前端面试真题

简介: WebPack面试题总结(1),2024华为Web前端面试真题

正文

  • Loader直译为"加载器"。Webpack将⼀切⽂件视为模块,但是Webpack原⽣是只能解析JavaScript⽂件,如果想将其他⽂件也打包的话,就会⽤到Loader。所以Loader的作⽤是让Webpack拥有了加载和解析非JavaScript文件的能力;
  • Plugin直译为"插件"。Plugin可以扩展Webpack的功能,让Webpack具有灵活性。在Webpack运⾏的⽣命周期中会⼴播出许多事件,Plugin可以监听这些事件,在合适的时机通过Webpack提供的API改变输出结果。

2、WebPack中bundle,chunk,module的作用是什么?


  • bundle 是由Webpack打包出来的文件;
  • chunk 代码块,一个chunk由多个模块组合⽽成,⽤于代码的合并和分割;
  • module 是开发中的单个模块,在Webpack中⼀个模块对应⼀个⽂件,Webpack会从配置的entry中递归开始找出所有依赖的模块。

3、Less转换Css过程


less模块通过Webpack中Less-Loader将LESS文件转义成Css文件

4、打包原理


这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」,内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道

HTML

  • HTML5有哪些新特性?
  • Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?
  • 如何实现浏览器内多个标签页之间的通信?
  • ⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?
  • 简述⼀下src与href的区别?
  • cookies,sessionStorage,localStorage 的区别?
  • HTML5 的离线储存的使用和原理?
  • 怎样处理 移动端 1px 被 渲染成 2px 问题?
  • iframe 的优缺点?
  • Canvas 和 SVG 图形的区别是什么?

JavaScript

  • 问:0.1 + 0.2 === 0.3 嘛?为什么?
  • JS 数据类型
  • 写代码:实现函数能够深度克隆基本类型
  • 事件流
  • 事件是如何实现的?
  • new 一个函数发生了什么
  • 什么是作用域?
  • JS 隐式转换,显示转换
  • 了解 this 嘛,bind,call,apply 具体指什么
  • 手写 bind、apply、call
  • setTimeout(fn, 0)多久才执行,Event Loop
  • 手写题:Promise 原理
  • 说一下原型链和原型链的继承吧
  • 数组能够调用的函数有那些?
  • PWA使用过吗?serviceWorker的使用原理是啥?
  • ES6 之前使用 prototype 实现继承
  • 箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?
  • 事件循环机制 (Event Loop)


相关文章
|
JSON 前端开发 JavaScript
Webpack面试题
【10月更文挑战第1天】
367 138
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
395 7
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
368 6
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
297 2
|
前端开发 JavaScript Shell
深入解析前端构建利器:webpack核心概念与基本功能全览
深入解析前端构建利器:webpack核心概念与基本功能全览—
413 1
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
242 13
|
JSON 前端开发 JavaScript
前端工程化:Webpack配置全攻略
【7月更文挑战第14天】
267 6
|
JSON 缓存 前端开发
前端工程化:Webpack配置全攻略
【7月更文挑战第18天】
272 1
|
缓存 前端开发 JavaScript
高级前端常见的面试题?
【7月更文挑战第11天】 **高级前端面试聚焦候选人的技术深度、项目实战、问题解决及技术趋势洞察。涉及React/Vue生命周期、Redux/Vuex状态管理、Webpack优化、HTTP/HTTPS安全、性能提升策略、PWA、GraphQL、WebAssembly、安全性议题及项目管理。通过回答,展现候选人技术广度与应对复杂场景的能力。**
773 1
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
237 0