webpack

官网描述：webpack is a static module bundler for modern JavaScript

webpack是一个为现代JavaScript应用工作的静态模块化打包工具
打包bundler：webpack可以帮助打包，它是一个打包工具
静态的static：代码最终打包成静态资源
模块化module：webpack默认支持各种模块化，ES Module、CommonJS、AMD等
现代的modern：现代前端开发面临诸多问题，催生了webpack的发展

个人理解：webpack强大来自于他的生态，各种解析器loader和插件plugins让webpack能够集成各方工具，用于项目的打包解析以能够在浏览器中显示想呈现的内容。

webpack主要依赖：webpack 和 webpack-cli

执行webpack进行打包可以直接执行以下命令

项目根目录终端执行： npx webpack————npx是指从node_modules文件夹下bin目录中执行对应命令
在package.json文件中配置脚本script中："build": "webpack" ; 随后在项目根目录执行：npm run build ————npx的简化版

webpack默认存在着js解析器，更多功能是打包，但是对于各种文件的解析需要添加对应的loader和plugins。

例如：ES6以后的js高级语法需要搭配babel-loader进行解析；css样式文件需要style-loader和css-loader，使用less或scss则需要添加对应的loader等

注意：由于module的loader规则rule的use加载规则是从后往前加载，所以在配置css解析是需要注意

    {
        test: /\.css$/, // 正则表达式: 匹配css结尾
        // 语法糖解决
        // loader: "css-loader", // 指定css-loader
        // 完整写法
        use: ["style-loader", "css-loader", "less-loader"],
     },

认识webpack一些属性的含义

target：构建目标（默认是web，编译为浏览器环境可用）
mode：设置当前模式（开发development模式或生产production模式）
devtool：控制生成映射（devtool:"source-map" 生成打包后和真实代码的映射文件）
entry: 打包入口文件路径（从当前文件编译，所有依赖或注入的第三方库或者文件都会被打包起来，没有引用到的文件不会被打包）
output：打包后的文件对象配置
1. path：打包后文件的输出路径（绝对路径：可以使用node中的path模块）
2. filename：输出后的文件名
watch：布尔值（打包热更新，能够刷新打包但是不会实施刷新网页）
devServer：webpack本地服务（可以用来搭配跨域和热模块更新）；dev-server并不会打包然后输出文件，只是将打包后文件放在内存中（memory）中提高项目效率
1. contentBase：设置可用资源目录，目录下的可以在未打包的时候也能够通过相对路径进行使用
2. hot：模块热替换；和热更新不同，在打包的文件中进行模块的增删查改的操作不会刷新整个页面，注意：不能够和watch一起使用
3. port：设置域名（默认是127.0.0.1/localhost, 这是个回环地址，在网络层被截取，其他的主机无法访问到，设置成0.0.0.0可以让任意域名进行访问）
4. open：布尔值（打包后是否自动打开浏览器）
5. proxy：网络代理（将匹配到的路径进行转发——服务器代理跨域）
resolve：文件后缀名解析配置（js等文件的后缀可以省略，在改配置中进行匹配）
1. extension：后缀名的匹配
2. alias：别名，将绝对路径设置成对应别名
module：loader模块的处理规则
plugins: 插件数组

示例：webpack从零配置实现展示vue组件

vue-cli

vue的脚手架工具，里面内置了webpack用来对项目进行打包

vue-cli溯源到内部webpack配置

使用vue-cli构建项目后，在package.json文件中的脚本配置"serve": "vue-cli-service serve"，通过这个能够执行本地服务热更新
脚本是代理npx执行 node_modules文件夹下bin目录的对应插件命令 vue-cli-service，在这里能够找到对应的配置文件，是来自于**\node_modules@vue\cli-service\bin\vue-cli-service.js**文件

3. vue-cli-service文件中是执行内部配置service类的run函数执行命令的

找到Service文件中的run函数，其中会执行一个init初始化函数来加载配置

在init函数中会进行webpack配置和插件的导入

init初始化的时候不仅会查看cli脚手架中默认的webpack配置，还会合并用户自定义的webpack配置 userOptions来自于loadUserOptions函数，该函数会寻找项目服务配置路径还有 ./vue/config.js 和 ./vue.config.cjs两个文件

因此，用户可以在根目录下配置 vue.config.js 或 vue.config.cjs文件进行自定义的webpack配置

// 自定义配置———— cliservice会使用merge合并该配置文件中的配置
module.exports = {
  // cliService的serveice文件中，会判断当前导出的configureWebpack对象是否存
  // 存在的话，将该configureWebpack配置对象合并到系统的webpack配置中
  configureWebpack: {
    // 例如跨域
    devServer: {
      proxy: {
        "/api": {
          target: "localhost:000",
          pathRewrite: {
            "^/api": ""
          }
        }
      }
    }
  }
}

vite

主要由两部分组成：

开发服务器，基于原生ES模块提供了内建功能
一套构建指令（rollup），还能够预配置（简化操作，没有webpack那样配置项，内部已经帮忙做了）

预配置

对于less并不需要配置对应的loader，仅需下载工具npm install less；

对于需要搭配对应插件的postcss，仅需在根目录配置他的插件

ESBuild

vite内部使用的是ESBuild来将代码进行解码的，并且他是支持原生TypeScript，直接导入TS就行。

ESBuild的特点

超快构建速度，不需要缓存
支持ES6和CommonJS的模块化
Go语言编写，支持Go、JavaScript的API
支持TypeScript、JSX等语法编译
支持扩展其他插件
支持SourceMap、支持代码压缩

超快构建速度原因：

Go语言编写，可以直接转换成机器代码，无需转字节码
充分利用CPU内核
从零开发，不使用第三方插件，考虑了各种性能问题

webpack、vue-cli和vite