代码仓库: https://github.com/chenfenbgin/webpcak

一、webpack - loader、 plugin

注：默认打包，找到是 src/index.js。
命令是：npx webpack --entry ./src/main.js --output-path ./build

执行顺序： 需要使用css-loader进行处理，才能使用style-loader，创建style标签进行插入。

base64是被放到bundle.js里面的

public/index.html可以定义自己打包时采用的模板、

二、babel / vue-loader

三、webpack配置

注：这里利用的是express 服务器。derServer将源代码打包，打包后的资源放到内存menfs中， express开启一个服务，浏览器通过localhost:8080进行访问。首先下载下来的是index.html。如果script中没有找到请求的资源，可以去contentBase配置的文件夹中读取。

四、vue-cli

vite想要解决的问题：
1.某些文件浏览器是不能识别的（vue.ts文件等）
2.如果包之间依赖太多，那么会发送很多次的网络请求。

vite服务器原理：vite会见本地的服务器connent, 请求下来的是ts. less 文件，当然不可以直接给浏览器，vite会对进行转换成 es6代码（包括less文件也是变成es6 js 代码），返回给浏览器的是 es6 js 代码进行注入。

vite基于ESBuild: 也是vite快的一个原因。