一些常见的webpack/vite面试题汇总,后续不断更新。。。

216 阅读8分钟

webpack官网:webpack.docschina.org/

vite官网:vitejs.dev/

vite中文官网:vitejs.cn/

§ 说一下webpack常见的Loader有哪些?

raw-loader:加载文件原始内容(UTF-8)

file-loader:把文件输出到一个文件夹中,在代码中通过相对URL去引用输出的文件(处理图片和文字)

source-map-loader:加载额外的Source Map文件,用来方便断点调试

svg-inline-loader:将压缩后的SVG内容注入到代码中

image-loader:加载并且压缩图片文件

json-loader:加载JSNON文件

babel-loader:将ES6转换为ES5

ts-loader:将TypeScript转换为JavaScript

awesome-typescript-loader:将TypeScript转换为JavaScript,性能高于ts-loader

sass-loader:将SCSS/SASS代码转换为CSS

css-loader:加载CSS,支持模块化,压缩,文件导入等特性

style-loader:把CSS代码注入到JavaScript中,通过DOM操作去加载CSS

postcss-loader:扩展CSS语法,使用下一代CSS,可以配合autoprefixer插件自动补齐CSS3的前缀

vue-loader:加载vue.js单文件组件

§ 说一下webpack常见的Plugin有哪些?

define-plugin:定义环境变量

ignore-plugin:忽略部分文件

html-webpack-plugin:简化HTML文件创建(依赖于html-loader)

web-webpack-plugin:可方便地为单页面引用输出HTML,比html-webpack-plugin好用

uglifyjs-webpack-plugin:在webpack4之前,不支持ES6压缩

terser-webpack-plugin:支持压缩ES6(webpack4)

webpack-parallel-uglify-plugin:多进程执行代码压缩,提升构建速度

mini-css-extract-plugin:分离样式文件,CSS 提取为独立文件,支持按需加载

serviceworker-webpack-plugin:为网页应用增加离线缓存功能

clean-webpack-plugin:目录清理,每次 npm run build 打包后自动删除上次打包后的dist文件夹

§ 说一下webpack中的Loader和Plugin的区别?

loader本质就是一个函数,在该函数中对接收到的内容进行转换,然后返回转换后的结果

因为webpack只认识JavaScript,所以loader的作用就是对其他类型的资源进行转译的预处理工作

plugin是插件,plugin基于事件流框架Tapable,插件可以扩展webpack的功能,在webpack运行的生命周期中会生成很多事件,plugin可以接收这些事件,在合适的时机,通过webpack提供的API改变输出结果

loader需要在module.rules中配置,由于作为模块的解析规则,所以类型是输入。输入的每一项都是一个Object。loader中内部包含了test类型文件,loader和options参数等属性

plugin 在 plugins 中单独配置,类型为数组,每一项是一个 Plugin 的实例,参数都通过构造函数传入

§ webpack的作用是什么?

目前前端页面功能丰富,特别是SPA单页面应用(single page web application)技术流行之后,JavaScript的复杂度增加和需要一大堆依赖包,还需要解决scss,less等,webpack的作用就是扩展写法和编译工作。目前前端主流框架都已经完全依赖于webpack的辅助了

§ webpack的工作原理?

webpack的主要作用是模块打包,webpack的工作原理是分析你的项目结构,找到JavaScript模块以及其他的一些浏览器不能直接运行的扩展语言,比如Scss,TypeScript等,然后将其转换或者打包成浏览器认识的语言

§ webpack的打包原理?

把一切都当作模块处理,不管是css还是js还是image还是html,都可以相互引用,通过定义entry.js,对所有依赖的文件进行跟踪,将各个模块通过loader和plugin处理,最后打包在一起。其次是按需加载,在打包过程中webpack通过code splitting功能将文件分为多个chunks,还可以将重读的部分单独提取出来作为commonChunk,从而实现按需加载,最后把所有依赖的文件打包成一个bundle.js,通过代码分割成单元片段并按需加载

§ webpack的核心里面?

Entry:入口,weback执行构建的第一步是从Entry开始,可以理解为输入,告诉webpack要使用哪个模块作为构建项目的起点,默认为根目录src下面的index.js

output:出口,告诉webpack在哪里输出它,打包好的代码以及如何明明,默认为dist文件夹

Module:模块,在webpack中一切都是模块,一个模块对应着一个文件,webpack会从配置的入口(Entry)开始递归查找出所有依赖的模块

Chunk:代码块,一个Chunk由多个模块组合而成,用于代码合并和分割

Loader:模块转换器,用于把模块原内容按照需求转换成新内容

Plugin:扩展插件,在webpack构建流程中的特定时机,会广播出对应的事件,插件可以监听这些事件的发生,在特定的时际做对应的事情

§ webpack的基本功能有哪些?

代码转换:TypeScript编译成JavaScript,SCSS编译成CSS等

文件优化:压缩JavaScript,CSS,HTML代码,压缩合成图片等

代码分割:提取多个页面的公共代码,提取首屏不需要执行部分的代码,让其异步加载

模块合并:在采用模块化的项目由很多模块和文件,需要构建功能把模块分类合并成一个文件

自动刷新:监听本地源代码的变化,自动构建,刷新浏览器

代码校验:在代码呗提交到仓库钱需要检测代码是否符合规范,以及单元测试是否通过

自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统

§ 什么是bundle,什么是chunk,什么是module

bundle:是由webpack打包出来的文件

chunk:是指webpack在进行模块依赖分析的时候,代码分割出来的代码块

module:是开发中的单个模块

§ ExtractTextPlugin插件的作用是什么?

ExtractTextPlugin插件的作用是提取出 JavaScript 代码里的 CSS 到一个单独的文件

§ sourceMap的作用是什么?

sourceMap是一个映射关系,将打包后的文件映射到源代码中,作用是用于定位报错位置

配置方法:

devtool:'source-map'

加不同前缀的含义:

inline:不胜澈给映射关系文件,打包进main.js

cleap:1.只精确到位,不精确到列,打包速度快,2.只管业务代码,不管第三方模块

module:不仅管业务代码,而且还管第三方代码

eval:执行效率最快,性能最好

§ 讲一下HMR模块热更新

HMR借助webpack.HotModuleReplacementPlugin(),devServer开启hot,我们可以实现之刷新css,不影响js,或者js中实现热更新,只更新指定的js模块

if (module.hot) {
  module.hot.accept(’./library.js’, function() {
    // Do something with the updated library module…
  });
}

§ webpack如何配置多个入口文件?

entry: {
  home: resolve(__dirname, "src/home/index.js"),
  about: resolve(__dirname, "src/about/index.js")
}

用于描述入口的对象。你可以使用如下属性:

dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。

filename: 指定要输出的文件名称。

import: 启动时需加载的模块。

library: 指定 library 选项,为当前 entry 构建一个 library。

runtime: 运行时 chunk 的名字。如果设置了,就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。

publicPath: 当该入口的输出文件在浏览器中被引用时,为它们指定一个公共 URL 地址

§ 什么是长缓存?在webpack中如何做到长缓存优化?

浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或者更新,都需要浏览器去下载新的代码,最方便和最简单的更新方式就是引入新的文件名称

在webpack中,可以在output给出输出的文件制定chunkhash,并且分离经常更新的代码和框架代码,通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变

§ 什么是Tree-sharking?

Tree-sharking指打包中去除那些引入了但在代码中没用到的死代码。在wepack中js treeshaking通过UglifyJsPlugin来进行,css中通过purify-CSS来进行

§ webpack-dev-server 和 http服务器的区别?

webpack-dev-server使用内存来存储webpack开发环境下的打包文件,并且可以使用模块热更新,比传统的http服务对开发更加有效

§ 介绍一下webpack和vite的区别:

底层:

webpack是基于nodejs构建,js是以毫秒计数,

vite是基于esbulid预构建依赖,esbulid是采用go语言编写的,go语言是纳秒级别的

因为js是毫秒级别,go语言是纳秒级别的,所以从本质上讲,vite比webpack打包要快很多

1.webpack是先打包再启动开发服务器

webpack是先打包,再启动开发服务器,请求服务器时,直接给予打包后的结果

2.vite是直接启动开发服务器,然后按需编译依赖文件

vite时直接启动开发服务器,请求哪个模块再对哪个模块进行实时编译

原理:

vite是将开发环境下的模块文件作为浏览器要执行文件,vite启动的时候不需要打包,也不需要分析模块依赖,编译,所以启动速度非常快,当浏览器请求需要的模块时,再对指定的模块进行编译,这种按需编译的模块,所以极大的缩短了时间

HMR热更新原理:

webpack:重新将该模块的所有依赖重新编译

vite:当某个模块内容改变时,让浏览器重新请求该模块