webpack和node 相关

前端构建工具

• webpack原理
  webpack是一个模块打包工具，在webpack里面一切皆模块
  通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件
  loader:从字面上就是加载的意思，因为webpack它本身只支持打包符合commonjs规范的js文件，所以针对css,图片等格式没法打包，这时就需要使用loader,loader只专注于转化文件这一领域
  plugin是插件，扩展了webpack本身，他不是直接操作文件，是在webpack整个周期里监听某个事件，然后调用API处理
  几个常见的plugin和常见的loader
  　　plugin:
  　　html-webpack-plugin 为html文件中引入的外部资源，可以生成创建html入口文件
  　　mini-css-extract-plugin 分离css文件
  　　clean-webpack-plugin 删除打包文件
  　　HotModuleReplacementPlugin 热更新应用
  　　copy-webpack-plugin 拷贝静态文件
  　　terser-webpack-plugin 通过TerserPlugin压缩ES6代码
  　　loader:
  　　css-loader 加载 CSS，支持模块化、压缩、文件导入等特性
  　　image-loader 加载并且压缩图片文件
  　　babel-loader 把 ES6 转换成 ES5
  　　style-loader 把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
  　　file-loader 把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
  　　source-map-loader 加载额外的 Source Map 文件，以方便断点调试

webpack构建过程

从entry里配置的module开始解析entry依赖的所有module
每找到一个module，就会根据配置的loader去找对应的转换规则
对module进行转换后，再递归解析出当前module依赖的module
这些模块会以entry为单位分组，一个entry和其所有依赖的module被分 到一个组Chunk
最后webpack会把所有Chunk转换成文件输出
在整个流程中webpack会在恰当的时机执行plugin里定义的逻辑

vite

Vite 的主要功能就是通过劫持浏览器的这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器，vite整个过程中没有对文件进行打包编译，所以其运行速度比原始的webpack开发编译速度快出许多！
1,当声明一个 script 标签类型为 module 时,浏览器就会像服务器发起一个GET
如：

2,浏览器请求到了main.js文件，检测到内部含有import引入的包，又会对其内部的 import 引用发起 请求获取模块的内容文件

对webpack的了解

静态模块打包工具
他会在内部构建一个依赖图，这个依赖图反应模块之间的依赖关系，
并生成一个或者多个bundle文件(打包生成的文件就是bundle)
webpack本身可以解析打包各种符合模块规范的JS代码

核心概念：

mode 模式（生产模式 开发模式）区别是压不压缩文件
entry 入口 打包开始的入口js文件
output 出口 在哪输出打包好的bundle
loader 加载器 loader让webpack可以用来处理除了js以外的文件格式，因为webpack他只能对于js进行打包
比如打包css 就要使用style-loader css-loader 打包图片url-loader file-loader
plugin 插件 loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，压缩
比如拷贝文件，压缩，删除文件
html-webpack-plugin 会生成一个html文件
clean-webpack-plugin 用来清除上一个生成的bundle文件

treeshaking

treeshaking用来删除一些冗余的代码，依赖于modulejs的静态加载；
比如比如一个模块导出了一些函数，但是在别的模块没有被引用，那么这些代码就是dead code,这时就会删除这些代码，或者说引用剪进来了但是没有被使用，也会删除这些代码。
但是这个时候，还需要在package.json里面设置哪些可以删除为用代码的模块(设置为无副作用)
{
“name”: “your-project”,
“sideEffects”: false
}
将函数调用标记为无副作用
/#PURE/ double(55);

有副作用：是因为有一些代码是在import的时候执行了一些行为，而不是导出了一些东西比如polyfill，treeshaking并不能判断哪些脚本是副作用

因此需要在package.json中指定
“sideEffects”: [
“./src/polyfill.js”
],

polyfill是一块代码，作用是给一些浏览器提供他不支持的功能，比如说给IE低版本提供一些text-shodow等一些方法

抽象语法树

抽象语法树是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构
由 词法分析 和 语法分析 转换得到抽象语法树
词法分析 scanner(扫描器) 它读取源代码中的每一个字符，转换成token（词法令牌）, 最后，我的源代码可能会被转换成词法令牌的数组 list of tokens
语法分析 Syntax Analysis
也叫parser（解析器），将词法分析器解析出的词法令牌数组list of token，转换成树形的结构 tree representation

babel

1. 解析(PARSE)：将代码字符串解析成抽象语法树。
2. 转换(TRANSFORM)：对抽象语法树进行转换操作。
3. 生成(GENERATE): 根据变换后的抽象语法树再生成代码字符串。
   这样就可以将ES6的代码转译成ES5代码

为啥要用

我们知道javascript程序一般是由一系列的字符组成的，每一个字符都有一些含义，比如我们可以使用匹配的字符([], {}, ()), 或一些其他成对的字符(‘’, “”)和代码缩进让程序解析更加简单，但是对计算机并不适用，这些字符在内存中仅仅是个数值，但是计算机并不知道一个程序内部有多少个变量这些高级问题，
这个时候我们需要寻找一些能让计算机理解的方式，这个时候，抽象语法树诞生了。

抽象语法树怎么生成

步骤：
4-1 分词： 将整个代码字符串分割成 语法单元数组。
4-2 语义分析：在分词结果的基础之上分析 语法单元之间的关系。
经过词法分析和语法分析，我们的代码被转换成了一个树形节点，所有的树形节点组合起来，就形成了concrete syntax tree（混合语法树）

对node的了解

nodejs让javascript可以运行在服务器端，然后可以做一些文件操作，轻量方便一些
express中间件分成三种：
内置中间件 static
自定义中间件
第三方中间件 (body-parser) (拦截器)
这个中间件的作用在于 请求/开头的路径时 优先走中间件的回调函数 中间件里的next()表示是否继续往下执行 ,有next()就继续往下走, 没有next()就不往下走

MongoDB

MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。
MongoDB 文档类似于 JSON 对象。数据结构由键值(key=>value)对组成 ,更容易操作

mysql和mongodb区别

mysql数据库建立的是数据库表,有表连接，而mongodb建立的集合
mysql可以自己定义主键，mongodb是将_id自动设置为主键

mongoose步骤

连接数据库
创建Schma
生成model
增删改查：
插入：save保存实例
查找：find findOne findById
修改：update
删除：remove