Webpack 与vite最大的不同，是在开发的时候，webpack 进行了模块转化。 Webpack的功能非常强大，比如模块打包、代码分割、按需加载、HMR、文件建ring、Tree-shaking、Sourcemap、MF、Dev Server、DLL、持久化缓存、Loader缓存等等
而Vite开发模式 unbundle， 因为浏览器原生支持esm，所以根本没做什么 bundle 操作，而是交给了浏览器。在生产的时候用才Rollup构建
原生ESM
先看看原生ESM支持的写法，比如，这种 js-examples，但是我实际运行的时候会碰到一个跨域问题
sql复制代码Access to script at 'file:///Users/nanlan/Documents/my-project/js-examples/module-examples/basic-modules/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
报错原因是es6会受到同源策源的限制，所以需要通过HTTP或HTTPS协议从服务器加载你的脚本
js复制代码const express = require('express'); const app = express();
app.use(express.static('public')); // 'public'是你的静态文件（如HTML，JS，CSS等）所在的目录
app.listen(3000, () => console.log('Server is running on port 3000'));
然后运行localhost:3000就可以了
Webpack
在Webpack中，构建过程大概分为这么几个阶段初始化Init、构建Make、生成Seal
初始化阶段： 修整配置参数，创建 Compiler、Compilation 等基础对象，并初始化插件及若干内置工厂、工具类，并最终根据 entry 配置，找到所有入口模块
构建阶段： 从entry找到入口，调用loader转化为JS代码，调用Acorn 转化为AST结构，遍历 AST 找出模块依赖的模块；之后递归遍历所有依赖块，构建出 模块依赖关系图 (dependency graph)
生成阶段： 根据output的配置，将模块拆解成不同的chunk对象，经过一系列优化，再将代码翻译成产物
