1、webpack的特点
webpack是一个模块打包工具，可以使用webpack管理模块，并分析模块间的依赖关系， 最终编绎输出模块为 HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。
1、代码拆分 — Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。 在优化了依赖树后，每一个异步区块都作为一个文件被打包。
2、Loader – Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。 这样，任何资源都可以成为 Webpack 可以处理的模块。
3、智能解析 – Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件
4、Plugin(插件系统) – Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的， 还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
5、快速高效 – 开发配置可以选择不同环境的配置模式，可选择的打包文件，使用异步 I/O 和多级缓存提高运行效率
6、功能全面 — 最主流的前端模块打包工具，社区全面
2、对webpack的理解
一、webpack是什么
WebPack 是一个模块打包工具,可以使用WebPack管理模块,并分析模块间的依赖关系, 最终编绎输出模块为HTML、JavaScript、CSS以及各种静态文件 对于不同类型的资源,webpack有对应的模块加载器loader,比如说：
1、CSS有对应的css-loader、style-loader,解析less的less-loader,sass的sass-loader,JS有eslint-loader检查代码规范,
2、将 TypeScript 转换成 JavaScript的ts-loader,解析ES6为ES5的babel-loader
3、关于 Vue：解析.vue后缀文件的vue-loader、解析常用图片以及音视频资源的url-loader、 解析文件的file-loader,解析 JSON 文件的json-loader
二、webpack的基本功能（也就是各种loader的作用）
1、代码转换：ts 编译成 js、ES6转ES5、SCSS 编译成 CSS 等
2、代码语法检测：自动检测代码是否符合语法 （eslint-loader）
3、代码分割：打包代码时,可以将代码切割成不同的chunk(块),实现按需加载降低了初始化时间,提升了首屏渲染效率
4、监测代码更新,自动编译,刷新页面，就是自动刷新
5、文件压缩：比如,打包文件会去掉代码之间的空隔
6、模块合并：一个页面可能会由多个模块组成,所以编译时会把各个模块合并成一个文件
三、webpack基础配置
Webpack运行在node.js环境下,它的配置文件webpack.config.js遵循CommonJS规范,最终export出一个json对象。
1、entry,指定了模块的入口,指定了打包的入口文件
2、output,配置输出文件的存放位置、文件名、文件基础路径publicPath。输出指定了打包后的文件输出路径和文件名
3、loader,加载器用于处理不同类型的文件
4、module,配置各种类型文件的解析规则,比如说.vue文件、.js文件
5、plugins,配置扩展插件,扩展webpack的更多功能。
打包流程：
Webpack 会读取并解析配置文件，并根据配置生成一个Compiler对象。 Webpack根据配置中的入口文件，读取这些文件及其依赖的模块，并将它们组成一个依赖图。 然后会根据模块之间的依赖关系，递归地解析它们的依赖，直到所有的依赖都被解析完毕。 在解析依赖的过程中,会根据配置文件中的Loader规则对模块进行编译,对于不同的文件类型会使用不同的Loader来处理。 然后会根据配置中的插件，对加载的模块进行一系列的转换操作，比如压缩、合并、优化等。 最后,webpack会将所有模块转换后的代码合并成一个或多个文件，并输出到指定的输出目录中。
四、常见插件
内置插件： 1.ProvidePlugin将指定模块暴露到全局,使用的时候就不需要再import和require 2.DefinePlugin允许在编译时将你代码中的变量替换为其他值或表达式,比如说Vue中生产、开发环境的判断,所用的p
五、Loader和Plugin的区别
功能不同： Loader 本质就是一个函数,对接收到的文件进行转换,比如将ts转换成js,将scss转换成css等。 Plugin 是webpack的插件,可以扩展 Webpack 的功能。 运行时机不同 loader运行在打包文件之前,对文件进行预处理； plugins 运行在loader结束后,webpack打包的整个过程中,它是基于事件机制, 监听webpack打包过程中的某些节点,从而执行相应任务,进而改变输出。
六、webpack 优化
优化分为开发环境优化和生产环境优化,我们一般针对生产环境优化 1.oneOf找到匹配配置就终止 2.给打包出来的文件名添加哈希,实现浏览器缓存文件 3.tree shaking删除没有使用到的代码 4.code split代码分割,并行执行和按需加载 5.通过cdn引入第三方资源包 6.压缩代码,mode:production下自动压缩的 7.优化图片,小图可以使用 base64 的方式写入文件
追问：需要使用webpack解决实际问题的场景
3、webpack 工作原理(打包原理)
1、初始化参数：从配置文件和 Shell 中参数的合并，得出最终参数；
2、开始编译：用最终参数初始化 Compiler 对象，加载所有配置，执行run开始执行编译；
3、确定入口：根据 entry 找出入口文件；
4、编译模块：从入口文件出发，调用 Loader 递归编译依赖模块
5、输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，根据配置确定输出的路径和文件名
4、webpack 优化
优化分为开发环境优化和生产环境优化,我们一般针对生产环境优化：
1、oneOf找到匹配配置就终止
2、给打包出来的文件名添加哈希，实现浏览器缓存文件
3、tree shaking删除没有使用到的代码
4、code split代码分割，并行执行和按需加载
5、通过cdn引入第三方资源包、压缩代码，mode:production下自动压缩的、 优化图片，小图可以使用 base64 的方式写入文件
5、Pulgin 和 loader 区别
作用不同：
（1）loader让webpack有加载和解析各种资源的能力；
（2）plugin可以扩展webpack功能，在webpack运行周期中会广播很多事件，Plugin可以监听一些事件，通过webpack的api改变结果。
用法不同：
（1）loader在module.rule中配置。类型为数组，每一项都是Object；
（2）plugin是单独配置的，类型为数组，每一项都是plugin实例，参数通过构造函数传入。
6、webpack5 新特性
1、通过持久缓存提高构建性能、使用新算法来改善长期缓存；
2、通过更好的树摇和代码生成来改善捆绑包大小、停止引入了很多第三方包
3、对于未使用的模块，自动删除，v4则是统一打包
4、v4以es6 modules为基础，v5 可以处理commonjs
5、v4 只能输出es5 ，v5可以输出es5 es6，通过output.ecmaVersion: 2015设定输出版本
7、babel 配置
Babel是转码器，将 ES6 转为 ES5，就是用来处理这个js兼容问题的
babel-loader 对使用了ES2015+语法的.js文件进行处理
@babel/core 是babel的核心包
@babel/preset-env babel常用的转码器，有转换规则
@babel/polyfill 该插件对es6的一些方法进行处理，比如Generator, Set
babel-plugin-transform-runtime 是运行时的插件
8、有了解 websocket 吗？
WebSockets是一种协议，它允许客户端和服务器之间通过一个长连接进行实时、双向通信；
它使Web应用程序能够实现实时数据交换和事件驱动的交互；
与传统的HTTP请求-响应模型不同，WebSockets允许服务器主动向客户端推送数据，从而减少了网络延迟和带宽消耗；
WebSockets通常用于实现在线聊天、多人游戏、股票行情等需要实时更新数据的应用程序
9、简单介绍一下 node
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，可以让 JavaScript 代码在服务器端运行；
Node.js 的特点是事件驱动、非阻塞 I/O 模型和轻量高效，能够处理大量并发连接，适合编写高性能的网络应用和实时数据交互应用；
Node.js 采用了 CommonJS 规范来组织模块，可以方便地使用 npm 包管理器来安装和管理第三方模块；
Node.js 还提供了一些内置模块，例如 http、fs、path 等，可以方便地进行网络编程和文件操作；
Node.js 可以运行在各种操作系统上，包括 Windows、Linux、macOS 等。Node.js 的优点在于简单易学、高性能、高效率，可以快速开发出高性能的网络应用和实时数据交互应用。
追问：
path模块中join跟resolve有什么区别
export 跟module.exports区别
10、es6 有哪些新特性？
1、新增了块级作用域（let，const）
2、提供了定义类的语法糖（class）
3、新增了一种基本数据类型（Symbol）
4、新增了变量的解构赋值、函数参数允许设置默认值，引入了rest参数，新增了箭头函数。
5、数组新增了一些API，如isArray / from / of 方法；数组实例新增了 entries()，keys() 和 values() 等方法。
6、对象和数组新增了扩展运算符
7、ES6新增了模块化（import / export）
8、ES6新增了Set和Map数据结构。
9、ES6原生提供Proxy构造函数，用来生成Proxy实例
10、ES6新增了生成器（Generator）和遍历器（Iterator）
追问：set map 怎么用，区别是什么
11、箭头函数跟普通函数的区别
1.外形不同，箭头函数使用=>代替function关键字
2.箭头函数都是匿名函数、并且箭头函数不能用于构造函数，不能使用new
4.箭头函数中this的指向不同
在普通函数中，this总是指向调用它的对象，如果用作构造函数， this指向创建的对象实例。箭头函数本身不创建this,
也可以说箭头函数本身没有this，但是它在声明时可以捕获其所在上下文的this供自己使用,但是this一旦捕获就不会发生变化
5.箭头函数不绑定arguments，取而代之用rest参数…解决
12、了解 Promise 吗？
Promise是一种解决异步编程的方案,是为解决异步处理回调地狱问题而产生的
Promise有三种状态，对象的状态不受外界影响：
1、pending 初始状态
2、fulfilled 成功状态
3、rejected 失败状态
以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态
Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending 变成 fulfilled 或者由 pending 变成 rejected
Promise的三个缺点：
1）无法取消Promise,一旦新建它就会立即执行，无法中途取消
2）如果不设置回调函数，Promise内部抛出的错误，不会反映到外部
3）当处于pending状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成
常用方法：
1、Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例
2、Promise.race只要三个promise中有一个满足条件, 就会执行.then(用的较少)，先执行到成功就返回成功的状态，返回失败就是失败状态
3、Promise.resolve()函数被执行时, 会将promise的状态从 pending 改成 fulfilled 成功
4、Promise.reject()函数被执行时, 会将promise的状态从pending 改成 rejected 失败
async、await
async 作为一个关键字放在函数的前面，表示该函数是一个异步函数，async修饰的函数的返回值是一个promise对象
await即等待，用于等待一个Promise对象。它只能在异步函数 async function中使用，否则会报错
它的返回值不是Promise对象，而是Promise对象处理之后的结果
await表达式会暂停当前 async函数的执行，等待Promise 处理完成，
如果 Promise 正常处理(fulfilled)，await会拿到resolve传递出来的异步数据，然后再继续执行 async函数；
如果 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。
追问：
1.all跟allSettled的区别;
2.race，any区别；
13、ts的作用
TypeScript（简称TS）是一种由Microsoft开发的开源编程语言，它是JavaScript的超集，增加了静态类型检查和其他特性， 可以提高代码的可读性、可维护性和可扩展性。TS的主要作用包括：
1、静态类型检查：TS可以在编译时检查代码中的类型错误，避免在运行时才发现错误，提高代码的稳定性和可靠性。
2、代码提示和补全：TS可以根据代码的静态类型信息，提供更准确的代码提示和补全，减少开发者的错误和重复操作。
3、代码重构：TS可以通过类型信息和代码分析，提供更准确的重构建议，帮助开发者更快、更安全地重构代码。
4、更好的可读性和可维护性：TS强制规定了代码的结构和类型，使得代码更加清晰、易读、易维护。
5、更好的可扩展性：TS支持模块化和命名空间，使得代码更加模块化、可重用、可扩展。同时，TS还支持装饰器和接口， 可以更好地支持面向对象编程和函数式编程。
总之，TS可以帮助开发者编写更加高质量、可维护、可扩展的代码，提高开发效率和代码质量
14、uniapp生命周期 和 vue生命周期区别
uni-app需要支持多个平台，所以其生命周期和 Vue.js 的生命周期有些许不同。
uni-app 的生命周期包括： onLaunch：应用初始化时触发，只触发一次；
onShow：应用启动或从后台进入前台时触发；onHide：应用从前台进入后台时触发；
onError：应用发生错误时触发；onPageNotFound：页面不存在时触发；
onUniNViewMessage:对 nvue 页面发送的数据进行监听；
Vue 的生命周期包括：
beforeCreate：实例被创建之前触发。 created：实例被创建之后触发。 beforeMount：实例被挂载之前触发。 mounted：实例被挂载之后触发。 beforeUpdate：数据更新时触发，但是 DOM 尚未更新。 updated：数据更新时触发，DOM 已经更新。 beforeUnmount：实例被卸载之前触发。 unmounted：实例被卸载之后触发。
总的来说，uni-app 的生命周期主要与应用程序的启动、关闭和错误处理等相关，而 Vue 3 的生命周期则更加关注组件的创建、挂载、更新和卸载等方面。
15、git常用命令
git init 初始化仓库
git status 查看仓库当前状态
git checkout master 切到主分支
git fetch origin 获取最新变更
git checkout -b dev origin/master 基于主分支创建dev分支
git add . 添加到缓存
git commit -m ‘xxx’ 提交到本地仓库
git push -u origin master 同步远程仓库
git pull 同步到本地
git remote add origin url 本地仓库内容推送到远程仓库
git clone url 从远程仓库克隆项目到本地
git remote 查看远程库信息
git branch dev 创建分支
git checkout dev 切换分支
git merge 合并分支
16、git如何处理冲突
使用git fetch origin master 将远程分支拉下来
使用git merge origin master 手动合并冲突的内容，合并冲突前要和相关人员沟通好避免改错,合并代码并输入备注信息
使用git add xxx和git commit -m "xxx" 将改动提交
使用git push origin master 将改动提交到远程分支