2024 高级前端面试题之 前端工程相关 「精选篇」

该内容主要整理关于 前端工程相关模块的相关面试题,其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。

前端工程相关模块精选篇

  • 1. webpack的基本配置
  • 2. webpack高级配置
  • 3. webpack性能优化-构建速度
  • 4. webpack性能优化-产出代码(线上运行)
  • 5. webpack原理简述
  • 6. webpack热更新原理
  • 7. webpack Loader
  • 8. webpack Plugin
  • 9. webpack编译优化
  • 10. webpack import()原理
  • 11. webpack有哪几种文件指纹?
  • 12. webpack中如何处理图片的?
  • 13. webpack常用插件总结
  • 14. 抽象语法树AST
  • 15. Babel环境搭建和基本配置
  • 16. 使用babel-loader会有哪些问题?可以怎样优化?
  • 17. Babel 原理
  • 18. Babel是如何编译Class的?
  • 19. Babel Polyfill是什么
  • 20. Babel Runtime
  • 21. Tree Shaking原理是什么
  • 22. Vite了解吗
  • 23. 面试真题


1. webpack的基本配置

基于 webpack4

// webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { srcPath, distPath } = require('./paths')module.exports = {entry: path.join(srcPath, 'index'),module: {rules: [{test: /\.js$/,loader: ['babel-loader'],include: srcPath,exclude: /node_modules/},// {//     test: /\.vue$/,//     loader: ['vue-loader'],//     include: srcPath// },// {//     test: /\.css$/,//     // loader 的执行顺序是:从后往前(知识点)//     loader: ['style-loader', 'css-loader']// },{test: /\.css$/,// loader 的执行顺序是:从后往前loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss},{test: /\.less$/,// 增加 'less-loader' ,注意顺序loader: ['style-loader', 'css-loader', 'less-loader']}]},plugins: [new HtmlWebpackPlugin({template: path.join(srcPath, 'index.html'),filename: 'index.html'})]
}
// paths.js
/*** @description 常用文件夹路径*/const path = require('path')const srcPath = path.join(__dirname, '..', 'src')
const distPath = path.join(__dirname, '..', 'dist')module.exports = {srcPath,distPath
}
// webpack.dev.jsconst path = require('path')
const webpack = require('webpack')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')module.exports = smart(webpackCommonConf, {mode: 'development',module: {rules: [// 直接引入图片 url{test: /\.(png|jpg|jpeg|gif)$/,use: 'file-loader'}]},plugins: [new webpack.DefinePlugin({// window.ENV = 'development'ENV: JSON.stringify('development')})],devServer: {port: 8080,progress: true,  // 显示打包的进度条contentBase: distPath,  // 根目录open: true,  // 自动打开浏览器compress: true,  // 启动 gzip 压缩// 设置代理proxy: {// 将本地 /api/xxx 代理到 localhost:3000/api/xxx'/api': 'http://localhost:3000',// 将本地 /api2/xxx 代理到 localhost:3000/xxx'/api2': {target: 'http://localhost:3000',pathRewrite: {'/api2': ''}}}}
})
// webpack.prod.jsconst path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')module.exports = smart(webpackCommonConf, {mode: 'production',output: {filename: 'bundle.[contentHash:8].js',  // 打包代码时,加上 hash 戳path: distPath,// publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到},module: {rules: [// 图片 - 考虑 base64 编码的情况{test: /\.(png|jpg|jpeg|gif)$/,use: {loader: 'url-loader',options: {// 小于 5kb 的图片用 base64 格式产出// 否则,依然延用 file-loader 的形式,产出 url 格式limit: 5 * 1024,// 打包到 img 目录下outputPath: '/img1/',// 设置图片的 cdn 地址(也可以统一在外面的 output 中设置,那将作用于所有静态资源)// publicPath: 'http://cdn.abc.com'}}},]},plugins: [new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹new webpack.DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('production')})]
})

2. webpack高级配置

  • 配置多入口打包
  • 抽离CSS文件
  • 抽离公共代码splitChunks,避免多次打包

3. webpack性能优化-构建速度

  • 优化babel-loader
  • IgnorePlugin
  • noParse
  • happyPack
  • parallelUglifyPlugin
  • 自动刷新
  • 热更新
  • 优化打包速度完整代码
  • DllPlugin 动态链接库

4. webpack性能优化-产出代码(线上运行)

5. webpack原理简述

  • 1.1 核心概念
  • 1.2 工作流程 (加载 - 编译 - 输出)
  • 1.3 模块包装
  • 1.4 webpack的打包原理
  • 1.5 webpack的打包原理详细
  • 1.6 总结

6. webpack热更新原理

7. webpack Loader

8. webpack Plugin

  • 实现一个编译结束退出命令的插件

9. webpack编译优化

  • 优化webpack打包速度

10. webpack import()原理

  • 动态导入原理
  • webpack中如何实现动态导入?

11. webpack有哪几种文件指纹?

12. webpack中如何处理图片的?

13. webpack常用插件总结

14. 抽象语法树AST

15. Babel环境搭建和基本配置

16. 使用babel-loader会有哪些问题?可以怎样优化?

17. Babel 原理

18. Babel是如何编译Class的?

19. Babel Polyfill是什么

20. Babel Runtime

21. Tree Shaking原理是什么

  • 对tree-shaking的了解
  • 原理

22. Vite了解吗

  • Vite 特点
  • Vite 为什么启动非常快
  • 手写实现

23. 面试真题

  • 前端为何打包和构建
  • module chunk bundle区别
  • loader和plugin区别
  • babel和webpack的区别
  • babel-polyfill和babel-runtime的区别
  • webpack如何实现懒加载
  • 为何proxy不能被polyfill
  • webpack优化
  • 优化构建速度
  • 优化产出代码

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

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

相关文章

阿里云 DMS 执行sql变更

数据库开发-数据变更-无锁变更 选择数据库:比如要更新生产库,搜索生产库名字。 填入变更sql。

V2X,启动高增长引擎

车载通讯的下一个新周期,毋庸置疑是V2X。从4G、5G再到C-V2X,是车载通讯逐步从信息娱乐、行车数据监控到万物互联的关键。 去年5月,全球车载通讯芯片巨头—高通公司宣布,与以色列车联网(V2X)芯片设计公司Aut…

10个关键字让你的谷歌竞价排名瞬间飙升-华媒舍

在现代社会中,搜索引擎已经成为获取信息的主要途径之一。在这其中,谷歌搜索引擎以其强大的搜索算法和智能化的用户体验而闻名。对于企业主来说,如何提高在谷歌搜索结果中的排名,对于他们的品牌推广和获取潜在客户非常重要。 1. 关…

pointer-events: none;解决页面水印导致子节点鼠标事件失效的问题

背景:实现水印功能之后,由于水印是一个遮罩层,导致z-index元素比较低的子元素,鼠标移入事件、点击事件都失效了。 解决方案:给添加水印样式的元素,添加css样式:pointer-events: none;。子元素添…

DL之RNN之BiLSTM:基于IMDb电影评论数据集利用BiLSTM算法实现对电影评论进行情感分析二分类+模型训练过程可视化+模型推理实战代码之详细攻略

DL之RNN之BiLSTM:基于IMDb电影评论数据集利用BiLSTM算法实现对电影评论进行情感分析二分类+模型训练过程可视化+模型推理实战代码之详细攻略 目录

如何在树莓派安装运行Nginx实现无公网ip环境访问内网静态网站

文章目录 1. Nginx安装2. 安装cpolar3.配置域名访问Nginx4. 固定域名访问5. 配置静态站点 安装 Nginx(发音为“engine-x”)可以将您的树莓派变成一个强大的 Web 服务器,可以用于托管网站或 Web 应用程序。相比其他 Web 服务器,Ngi…

linux☞ Centos 基础篇

切换用户 重启系统、退出 su 用户 ### su switch user 重启系统 reboot 退出当前账户 logout 或者 exit 或者 CtrlD 修改网卡配置文件 vim /etc/sysconfig/network-scripts/ifcfg-ens33 TYPEEthernet:指明网卡类型为以太网 DEVICEens33:指定当前配置的…

LeetCode 每日一题Day 54 - 61

2859. 计算 K 置位下标对应元素的和 给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 请你用整数形式返回 nums 中的特定元素之 和 ,这些特定元素满足:其对应下标的二进制表示中恰存在 k 个置位。 整数的二进制表示中的 1 就是这个整数的 置位…

Find My点读笔|苹果Find My技术与点读笔结合,智能防丢,全球定位

点读笔是采用国际最新光学图像识别技术和先进的数码语音技术开发而成的新一代智能阅读和学习工具。它体现了电子产品与教育行业的完美融合,实现了科技以人为本的理念。点读笔能同时实现点读、复读、跟读、录音、娱乐等诸多功能。由于小孩贪玩很容易造成点读笔的丢失…

负载均衡下的webshell连接

一、环境配置 1.在Ubuntu上配置docker环境 我们选择用Xshell来将环境资源上传到Ubuntu虚拟机上(比较简单) 我们选择在root模式下进行环境配置,先将资源文件复制到root下(如果你一开始就传输到root下就不用理会这个) …

HTTP概述

HTTP概述 HTTP(Hypertext Transfer Protocol)是一种用于传输超文本的应用层协议。它是在客户端和服务器之间进行通信的基础,常用于 Web 应用中。在 Java 后端开发中,HTTP 扮演着重要的角色。以下是Java 后端视角下的 HTTP 概述&a…

华为配置接口二三层切换示例

配置接口二三层切换示例 组网图形 图1 配置非自协商模式下速率和双工模式组网图 二三层切换简介配置注意事项组网需求配置思路操作步骤配置文件 二三层切换简介 基于接口板的硬件构造,某些形态设备上接口只能作为二层以太网接口,某些形态设备上接口…

百无聊赖之JavaEE从入门到放弃(十四)异常

目录 一.异常机制 二.异常分类 三.异常的处理方式 1.捕获异常(try-catch-finally) 2.声明异常(throws 子句) 四.try-with-resource 五.自定义异常 六.IDEA 调试 debug 一.异常机制 工作中,程序遇到的情况不可能完美。比如&#xff1a…

神经网络与深度学习Pytorch版 Softmax回归 笔记

Softmax回归 目录 Softmax回归 1. 独热编码 2. Softmax回归的网络架构是一个单层的全连接神经网络。 3. Softmax回归模型概述及其在多分类问题中的应用 4. Softmax运算在多分类问题中的应用及其数学原理 5. 小批量样本分类的矢量计算表达式 6. 交叉熵损失函数 7. 模型预…

记一次某竞赛中的渗透测试(Windows Server 2003靶机漏洞)

靶机简介 Windows Server 2003是微软公司于2003年3月28日发布的服务器操作系统,它基于Windows XP/Windows NT 5.1进行开发,并在同年4月底上市。以下是关于Windows Server 2003的详细介绍: 系统名称与发布历程: 该产品最初被命名为…

存内计算技术—解决冯·诺依曼瓶颈的AI算力引擎

文章目录 存内计算技术背景CSDN首个存内计算开发者社区硅基光电子技术存内计算提升AI算力知存科技存算一体芯片技术基于存内计算的语音芯片的实现挑战 参考文献 存内计算技术背景 存内计算技术是一种革新性的计算架构,旨在克服传统冯诺依曼架构的瓶颈,并…

Nginx双域名管理内网服务

如何使用两个域名分别绑定内外网服务,方便内网用户和外网用户访问。举个例子:内网地址为:share.local.codejerry.cn,公网则通过share.codejerry.cn访问同一个服务。 一、内容概要 设置泛解析 DNS:讨论如何通过泛解析…

【安装指南】nodejs下载、安装与配置详细教程

目录 🌼一、概述 🍀二、下载node.js 🌷三、安装node.js 🍁四、配置node.js 🌼一、概述 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时,用于构建可扩展的网络应用程序。Node.js 使用事件驱动、…

01-为什么要学汇编语言

学习汇编语言的理由 1.汇编语言在发挥不可替代的作用。 效率: 运行效率:开发软件的核心部件,快速执行和实时响应。 开发效率:做合适的事,开发效率无敌 底层:计算机及外围设备的驱动程序。 操作系统的…