前端八股文面试题——webpack工程化

前端工程化面试题

  • webpack有哪些常见的loader? 你用过哪些loader?
  • webpack 有哪些常见的Plugin? 你用过哪些Plugin?
  • 说说Loader 和Plugin 的区别
          • 作用上
          • 结构上
  • webpack 构建流程简单说一下
  • 使用webpack开发时,使用过哪些可以提高效率的插件?
  • 如何优化webpack 的构建速度?
  • 文件指纹是什么?怎么用?
        • js的文件指纹设置。
        • css 文件指纹设置
        • 图片相关文件指纹设置
  • 是否写过loader?简单描写一下编写loader 的思路?
  • 是否写过Plugin?简单描写一下编写Plugin的思路?
  • 说说Babel 原理
  • source map 是什么?生产环境怎么用?
  • 文件监听原理
  • webpack 热更新原理
  • webpack 事件机制了解吗?
  • webpack5 相比于 webpack4 有哪些提升?
  • 对模块联班的理解
  • Webpack 中有哪些核心概念?
  • webpack 的mode是什么?
  • 什么是代码分割(code Splitting),如何在webpack中实现?

webpack有哪些常见的loader? 你用过哪些loader?

  • raw-loader: 加载文件原始内容
  • file-loader: 把文件输出到文件夹中,在代码中通过相对url
    去引用输出的文件夹(包含图片、字体)
  • url-loader:和file-loader类似,区别是用户可以设置一个阈值。 大于阈值会交给file-loader 处理,小于阈值则返回base64编码(一般用来处理图片)
  • source-map-loader:加载额外的source-map文件,方便断点调试
  • image-loader:加载并压缩图片文件
  • json-loader:加载json文件
  • babel-loader:将es6 装换成es5
  • ts-loader:将ts 语音转换成 js
  • sass-loader、less-loader:都是转换成css
  • css-loader:加载css
  • style-loader: 把css注入到js中,通过dom操作加载css
  • postcss-loader:扩展css语法,使用下一代css
  • eslint-loader、tslint-loader:代码检查。
  • vue-loader:加载vue.js单文件组件。

webpack 有哪些常见的Plugin? 你用过哪些Plugin?

  • define-plugin:定义环境变量,
  • ignore-plugin:忽略部分文件
  • html-webpack-plugin:简化html文件创建
  • uglifyjs-webpack-plugin:压缩js
  • mini-css-extract-plugin:分离样式文件,css提取为单独的文件,支持按需加载
  • clean-webpack-plugin:目录清理(用在下次打包之前把上次打包的内容清理掉)
  • webpack-bundle-analyzer:可视化webpack输出文件的体积。用于分析当前项目依赖文件的体积大小。
  • speed-measure-webpack-plugin:分析每个loader 和 plugin 执行耗时

说说Loader 和Plugin 的区别

作用上
  • loader 本质是一个函数,对接收到的内容进行转换,返回转换后的结果,webpack只认识js,所以loader就相当于翻译官。对其他类型资源进行转译和预处理。
  • plugin:是插件,它基于事件流框架 Tabable,可以扩展webpack功能,在webpack运行的生命周期中会广播很多事件。plugin可以监听这些事件,在适合的时机通过webpackapi 改变输出的结果。
结构上
  • loader :在module.rules 中进行配置,类型是数组,每项都是对象,对象包含(test 文件类型,loader 对应的模块加载器,option 对应的参数)
  • plugin:每个plugin都需要单独配置,类型是数组,每项plugin是一个plugin实例,参数通过构造函数传入。

webpack 构建流程简单说一下

它的运行流程是一个串行的过程。
1、初始化参数:从配置文件和shell语句中读取并且合并参数,得到最终的参数。
2、开始编译:初始化Compiler 对象,加载所有的配置插件。执行对象run方法,开始编译。
3、确定入口:根据配置的entry找到所有入口
4、翻译模块:调用所有的loader 对模块进行编译,找出模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过处理。
5、完成模块编译:经过loader翻译完所有模块后的最终内容以及它们之间的依赖关系。
6、输出资源:根据入口以及它们依赖关系组装成一个个包含多个模块的chunk,再把每个chunk 转换成单独的文件加入到输出列表中。(这里可以修改输出内容,并且是修改的最后一个机会)
7、输出完成:根据配置确定输出的路径和文件名,把文件内容写到文件中,

在上面流程中,webpack 会在特定的时间点广播特定事件,插件在监听到事件后调用webpack 提供的API 改变输出结果

使用webpack开发时,使用过哪些可以提高效率的插件?

  • webpack-dashboard:更友好的展示的展示相关包信息。
  • webpack-merge:提取公共配置,可以将多个配置文件合并,减少代码重复。
  • speed-measure-webpack-plugin:分析 loader 和 plugin 的耗时,从而分析构建过程中的性能瓶颈。
  • size-plugin:监控资源体积变化,尽早发现问题。
  • HotModuleReplacementPlugin:模块热替换。

如何优化webpack 的构建速度?

  1. 使用高版本webpack 和 node.js
  2. 多进程 / 多实例构建 thread-loader
  3. 压缩代码 、多进程并行压缩‘

1)webpack-paralle-uglify-plugin :可以并行运行 UglifyJS 插件,从而更加充分、合理的使用 CPU
资源,从而大大减少构建时间 2)terser-webpack-plugin :它使用 Terser 库来执行压缩,Terser
是一个用于压缩 JavaScript 代码的工具,可以对代码进行简单的混淆,以及删除未使用的代码和注释等优化。 3)
mini-css-extract-plugin : 可以避免将 CSS 代码打包到 JavaScript 文件中,减少 JavaScript
的体积,同时也可以使得 CSS 文件可以被浏览器缓存,提高页面加载速度。

  1. 图片压缩 (imagemin、image-webpack-plugin)
  2. 缩小打包作用域
    1)、通过exclude / include 来确定loader 规则范围。
    2)、设置resolve.extensions.
    3)、resolve.modules
  3. 提取页面公共的资源
    1)、基础包分离
    2)、使用html-webpack-externals-plugin 基础包通过cdn引入,不打入bundle 中。
    3)、使用splitchunksplugin 将代码拆分成多个块,以便在不同的环境中按需加载。
  4. 充分利用缓存提升二次构建速度。
    1)、使用 babel-loader 开启缓存
    2)、terser-webpack-plugin 开启缓存
    3)、cache-loader 或者 hard-source-webpack-plugin
  5. tree shaking (没有用过的模块代码进行标记,从最终bundle 中去掉)

文件指纹是什么?怎么用?

文件指纹:打包后输出的文件名后缀。

  • hash:和整个项目构建相关的,只有项目文件改变、项目的hash值就会改变。
  • chunkHash:和webpack打包的chunk 相关,不同的entry产生不同的chunkHash,
  • contentHash:根据文件内容定义hash,文件内容不变contentHash就不会变。
js的文件指纹设置。

主要设置output 的 fllename 使用 chunkhash.

module.exports = {entry: {spp: './src/app.js', search: './src/search.js'},output: {filename: '[name][chunkhash:8].js',path:_dirname + '/dist'}// chunkhash:8 是设置对应的长度
}
css 文件指纹设置

设置MiniCssExtractPlugin

module.exports = {entry: {spp: './src/app.js', search: './src/search.js'},output: {filename: '[name][chunkhash:8].js',path:_dirname + '/dist'},plugin: [new MinCssExtractPlugin({ filename:'[name][contenthash:8].css'}),]
}
图片相关文件指纹设置

设置 file-loader 中的name

const path = require('path');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')}, module: {rules: [{test: /\.(png|svg|jpg|gif)$/,use: [{loader: 'file-loader',option: {name: 'img/[name][hash:8].[ext]'},}],}]}
}

是否写过loader?简单描写一下编写loader 的思路?

  • loader是支持链式调用的,所有在开发中需要严格遵守单一职责。每个loader负责自己所需要负责的事情。
  • loader是运行在nodejs中的,可以调用nodejs api 或者安装第三方模块调用。 传给loader 的原内容是 utf-8
  • 编码的字符串 尽可能异步化loader ,如果计算量小的化同步也可以
  • loader 是无状态的,不应该在loader 中保留状态
  • 开发loader 时可以使用 loader-utils schema-utils 工具 还可以(通过npm link 和
    resolveloader 这两种方式)加载本地的loader 方法

是否写过Plugin?简单描写一下编写Plugin的思路?

  • webpack运行生命周期中会广播出很多事件,让plugin 监听事件,特定阶段钩入想要添加的自定义插件内容
  • webpack通过tapable 事件流机制保证插件有序性,使系统的扩张性很好

compiler 暴露整个生命周期相关钩子
compliation 暴雷与模块和依赖有关的颗粒度更小的事件钩子
plugin 需要再原型上绑定apply方法,才能访问compiler 实例。
插件接收 compiler 、compliation 都是同一个引用。
找到合适的事件点完成想要执行的内容,

说说Babel 原理

在 webpack 中,Babel 主要用于将 ECMAScript 2015+版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其它环境中。Babel 的转化过程如下:

  1. Parse:使用 babylon 将原始代码转换为抽象语法树。
  2. Transform:通过 babel-traverse 对前面的抽象语法树进行遍历修改,并获得新的抽象语法树。
  3. Generator:使用 babel-generator 将抽象语法树转换为代码。

这三个操作通过 babel-core 合成一个对外的 API 供外界使用。

source map 是什么?生产环境怎么用?

Source Map 用于将编译、打包、压缩后的代码映射回源代码。

在生产环境中使用 Source Map 有以下几个步骤:

  1. 在构建过程中生成 Source Map:确保你的构建工具(如 webpack)配置为生成 Source Map。
  2. 部署包含 Source Map 的构建产物:将生成的 Source Map 与构建后的代码一起部署到生产环境。
  3. 在开发工具中启用 Source Map:这样可以在浏览器中查看原始源代码,并在调试时将错误和堆栈跟踪映射回原始代码。

使用 Source Map 的好处包括:

  1. 更好的调试体验:可以在生产环境中查看和调试原始代码。
  2. 提高开发效率:更容易找到和解决问题。

然而,需要注意的是,使用 Source Map 会增加构建产物的大小,可能会对性能产生一定影响。因此,在生产环境中应谨慎使用,并在必要时进行优化。

文件监听原理

Webpack 文件监听的原理是通过轮询判断文件的最后编辑时间是否发生变化。Webpack 首先存储文件的修改时间,下次再有修改时会与上次修改时间进行比对。如果发现不一致,Webpack 不会立即告诉监听者,而是将文件修改缓存起来,等待一段时间。在等待期间,如果有其他文件发生变化,Webpack 会将变化列表一起构建,并生成到 bundle 文件夹。

文件监听的目的是在发现文件发生变化时,自动重新构建出新的输出文件。开启监听模式有两种方式,在启动 Webpack 命令时带上 --watch 参数,或在配置 webpack.config.js 中设置 watch: true。构建完成后,输出的文件会被放入磁盘中。

webpack 热更新原理

Webpack 的热更新(Hot Module Replacement,简称 HMR)是一种在开发时提供实时更新的功能,它使得在修改代码后,不需要完全刷新页面就能立即看到更新的效果。HMR 的原理涉及以下几个主要步骤:

  1. 启动时建立 WebSocket 连接:在项目启动时,Webpack 会创建与开发服务器的 WebSocket 连接,用于在构建完成后接收更新的模块。

  2. 构建编译阶段:Webpack 在编译时会在每个模块中注入 HMR 运行时代码。该代码会监听源代码的变化,并通知 HMR runtime 进行处理。

  3. 文件监控:Webpack 会监控所有入口文件及其依赖的文件,一旦检测到文件发生变化,会触发重新编译。

  4. 构建完成:当编译完成后,Webpack 会将编译结果发送给开发服务器,并通过 WebSocket 通知客户端有新的资源可用。

webpack 事件机制了解吗?

常见事件

  • before-run:开始执行构建之前触发,可以用于清理上一次构建的临时文件或状态
  • run:开始执行构建触发
  • before-compile:开始编译代码前触发,可以用于添加一些额外的编辑配置或者预处理代码
  • compile:开始编译,可用于监听编译过程或编译处理错误
  • this-compilation:创建新的 Compilation 对象触发,Compilation 对象代表当前编辑过程中的所有状态和信息。
  • compilataion:编辑代码期间触发,可用于监听编译过程或编译处理错误
  • emit:输出文件之前触发,修改输出文件或者生成一些附件文件。
  • after-emit:输出文件后触发,用于清理中间文件
  • done:构建完成时触发,用于生成构建报告。

事件机制
Webpack采用事件驱动的方式打包web应用,其事件机制主要依靠一个很小的核心库tapable来实现。封装了事件订阅发布机制。compile、compilataion 都是tapable类的实例对象,

webpack5 相比于 webpack4 有哪些提升?

  • 更快的构建速度,尤其是开发模式下构建速度明显的提升
  • Tree Shaking:优化算法。更准确哪些代码无用,更好的优化构建输出的文件大小
  • 内置的持久化缓存:可以缓存每个模块编译结果,加速后续构建,
  • 支持 WebAssmbly
  • 模块联班:Module federation 解决模块共享、远程加载。为微前端架构提供支持。

对模块联班的理解

模块联邦(Module Federation)是 Webpack 5 推出的一个新特性。它是一种模块共用机制,允许本地调用远程的模块。通过模块联邦可以解决微前端依赖问题,对比 npm 库具有实时性的优势。

Webpack 中有哪些核心概念?

Webpack 中有以下几个核心概念:

  1. 模块:Webpack 会将各种资源(如 JavaScript、CSS、图像等)视为模块。
  2. 入口:指定 Webpack 开始构建的起点。
  3. 输出:定义了最终生成的文件。
  4. 加载器:用于处理特定类型的文件。
  5. 插件:扩展 Webpack 的功能。
  6. 依赖关系:模块之间的依赖关系。
  7. 模块解析:确定如何查找和加载模块。
  8. 代码分割:将代码分割成多个块,按需加载。
  9. 优化:例如压缩、合并等,提高性能。
  10. 热更新:在运行时自动更新变更的模块。

webpack 的mode是什么?

Webpack 的 mode 提供了 mode 配置选项,告知 Webpack 使用相应模式的内置优化。mode 的值可以是 development、production 或 none,分别代表开发模式、生产模式和无预设模式(需要从头开始配置)。如果 mode 没有被设置,系统会默认使用 production 模式。

  1. development(开发模式):提供了一些有助于开发和调试的特性,更详细的错误信息和警告。实时重新加载。 未压缩的代码以提高调试效率。
  2. production(生产模式):用于准备上线的构建,强调优化和性能:代码压缩和混淆。 资源优化。
  3. none (无预设模式) 关闭任何默认优化选项,只执行基本打包功能,不做任何额外处理。

什么是代码分割(code Splitting),如何在webpack中实现?

代码分割是将一个应用程序的代码拆分成多个独立的块,以便可以按需加载。可以减少初始加载时间提高页面性能,在 Webpack 中配置实现代码分割,有以下多种方式:
1、入口起点配置:配置多个入口起点,不同部分打包成独立的代码块。
2、动态导入 (Dynamic import):可以将模块作为单独的代码块按需加载,这样模块需要时才会下载执行,
3、使用 SplitChunksPlugin 插件来自动分割代码。自动拆分公共模块,并创建独立代码块,避免重启加载,提高缓存利用率。
4、使用 CommonsChunkPlugin 插件来提取公共模块。

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

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

相关文章

python买铅笔 2024年3月青少年电子学会等级考试 中小学生python编程等级考试一级真题答案解析

目录 python买铅笔 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python买铅笔 2024年3月 python编程等级考试级编程题 一、题目要求 1、编…

习题3-4 统计学生成绩

本题要求编写程序读入N个学生的百分制成绩,统计五分制成绩的分布。百分制成绩到五分制成绩的转换规则: 大于等于90分为A;小于90且大于等于80为B;小于80且大于等于70为C;小于70且大于等于60为D;小于60为E。…

【电路笔记】-逻辑非门

逻辑非门 文章目录 逻辑非门1、概述2、晶体管逻辑非门3、六角施密特反相器逻辑非门是所有逻辑门中最基本的,通常称为反相缓冲器或简称为反相器。 1、概述 反相非门是单输入器件,其输出电平通常为逻辑电平“1”,当其单个输入为逻辑电平“1”时,输出电平变为“低”至逻辑电平…

通用爬虫的概念简述

一、🌈什么是通用爬虫 通用爬虫(General Purpose Web Crawler或Scalable Web Crawler)是一种网络爬虫,其设计目标是对整个互联网或尽可能广泛的网络空间进行数据抓取。通用爬虫主要用于搜索引擎构建其庞大的网页索引数据库&#…

FineReport安装后,启动报错:get tomcat thread pool info error

报错信息如下,一堆堆的错误: 1、get tomcat thread pool info error 2、lineofficial plugin is not istalled 3、line...not installed 4、lark... 5、dingtalk ... 最后解决方案: 1、安装java jdk1.8 2、安装了tomcat 8 安装版 3、…

MBTI测试深度解析:从性格类型看职业选择与发展方向!(包含开源免费的API接口)

MBTI简介 迈尔斯-布里格斯类型指标(Myers–Briggs Type Indicator,MBTI)是由美国作家伊莎贝尔布里格斯迈尔斯和她的母亲凯瑟琳库克布里格斯共同制定的一种人格类型理论模型。 该指标以瑞士心理学家卡尔荣格划分的8种心理类型为基础&#xff…

使用LIMIT进行分页

SELECT employee_id, first_name, salary FROM employees LIMIT 0, 5; 0为偏移量, 5为条目数 每页pageSize条记录,显示第page页 LIMIT (page - 1) * pageSize, pageSize; # 或者 LIMIT pageSize OFFSET (page - 1) * pageSize;

备战蓝桥杯---递归与DFS刷题2

1. 数据范围允许直接暴力把所有组合都写一遍,我们用Pair来存,在sort中分式比较只要把自己的分子与对方的分母乘比较即可,下面介绍一下st树的写法,具体原理就不说了,它是先[0/1,1/1]然后取分子分母的平均化成两个区间&a…

web学习笔记(五十三)身份认证

目录 1.Web 开发模式 1.1 服务端渲染的 Web 开发模式 1.2 服务端渲染的优缺点 1.3 前后端分离的 Web 开发模式 1.4 如何选择 Web 开发模式 2. 身份认证 2.1 Session 认证机制 3. 在 Express 中使用 Session 认证 3.1 安装express-session 中间件 3.2 配置 express-ses…

electron 打不同环境的包

我用的打包工具: electron-builder 1、在package.json 文件的同级下创建2个js文件 electron-builder-test.config.js electron-builder.config.js electron-builder-test.config.js const basejson require(./electron-builder.config.js); module.exports {extraMetada…

智能变电站协议系列-5、IEC 104协议细化解读(IEC 60870以及如何获取对应国标和行标)

一、前言 通过之前整体性的协议分析,目前确定先基于IEC104做深入分析,来结合分析电网常见的业务,以此从协议侧关联深入到业务侧。在国内该标准也应用比较稳定和广泛了,所以研究104协议相关资料也会更全一些。 二、资料及标准收集…

【强化学习的数学原理-赵世钰】课程笔记(二)贝尔曼公式

【强化学习的数学原理-赵世钰】课程笔记(二)贝尔曼公式 一. 内容概述 1. 第二章主要有两个内容 (1)一个核心概念:状态值(state value):从一个状态出发,沿着一个策略我…

OWASP TOP10 漏洞详解

前言 该内容是 OWASP TOP 10 的学习笔记,笔记内容来源 B 站龙哥的视频【12.Top漏洞10:服务器请求伪造_哔哩哔哩_bilibili】 一、访问控制崩溃 概念 未对通过身份验证的用户实施恰当的访问控制。攻击者可以利用这些缺陷访问未经授权的功能或数据&#xf…

QA测试开发工程师面试题满分问答9: Python中内存管理的概念、原理、使用

概念原理 Python中的内存管理是由解释器自动处理的,它使用引用计数和垃圾回收机制来管理内存。以下是Python内存管理的一些关键概念、设计原理和最佳实践,以帮助您高效使用和管理内存: 引用计数:Python使用引用计数来追踪对象的引…

Shell学习 - 2.25 Shell $[]:对整数进行数学运算

和 (())、let 命令类似,$[] 也只能进行整数运算。 Shell $[] 的用法如下: $[表达式] $[] 会对表达式进行计算,并取得计算结果。如果表达式中包含了变量,那么你可以加$,也可以不加。 Shell $[] 举例: [c.bia…

delphi 中注册表的操作

例:列出注册表"HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run"中的所有键值到界面上或文本中;并把自己做的这个程序设置为开机启动。(写到前面那个注册表路径上就生效了) unit Unit1;interfaceusesWindows, Messages, Sys…

基于JAVA+SSM+微信小程序+MySql的图书捐赠管理系统设计与实现(前后端分类)

一、项目背景介绍: 在当今社会,图书捐赠是一种普遍而有益的行为,旨在促进阅读、教育和知识传播。图书捐赠可以帮助改善教育资源不足的地区、学校和社区的阅读环境,提供更多的学习机会和知识获取途径。随着互联网和移动技术的发展&…

安卓APP的开发:为了安全的设计

安卓APP的开发:为了安全的设计 安卓默认是为了安全和隐私而设计的.隐私方面的设计聚焦于最小化. 最小化权限请求,最小化位置读取,还有最小化跨APP的数据可见性. 为了安全的设计,遵循如下的最佳实践:加密,完整性和授权. 保护用户隐私 最小化权限请求 请求你的APP功能需要的最…

Linux初学(十六)NFS文件共享

一、NFS 1.1 简介 NFS(Network File System,网络文件系统)是一种分布式文件系统协议,允许不同的计算机之间通过网络共享文件和目录。 NFS类似于类似于Windows文件共享 将Linux的一个目录共享到网络中,网络中的其他所有…

Redis-更新策略,缓存穿透,缓存雪崩,缓存击穿

Redis-更新策略,缓存穿透,缓存雪崩,缓存击穿 1.缓存更新 策略 淘汰策略超时剔除主动更新 更新策略:先修改数据库还是先删除缓存 结论:先修改数据库,因为缓存的操作比较快,容易产生数据不一致更新缓存还是删除缓存? …