1、webpack require context
在 webpack 中我们可以通过 require.context 方法「动态」解析模块。比较常用的一个做法就是指定某个目录，通过正则匹配等方式加载某些模块，这样在后续增加新的模块后，可以起到「动态自动导入」的效果。
例如在项目中，我们动态匹配 modules 文件夹下的 route.ts 文件，在全局的 vue-router 中设置 router
const routes = require.context('./modules', true, /([\w\d-]+)\/routes\.ts/)
require context 是 webpack 提供的特有的模块方法，并不是语言标准，所以在 vite 中不再能使用 require context。但如果完全改为开发者手动 import 模块，但好在 vite2.0 提供了 glob 模式的模块导入，主要就是将require context改为import.meta.globEager，import.meta.globEager 会在构建时做静态分析将代码替换为静态 import 语句。如果希望能支持 dynamic import，请使用 import.meta.glob 方法。
2、入口与 HTML 文件
在 vite 中也需要指定入口文件。但和 webpack 不同，在 vite 中不是指定 js/ts 作为入口，而是指定实际的 HTML 文件作为入口。
在 webpack 中，用户通过将 entry 设置为入口 js（例如 src/app.js）来指定 js 打包的入口文件，辅以 HtmlWebpackPlugin 将生成的 js 文件路径注入到 HTML 中。而 vite 直接使用 HTML 文件，它会解析 HTML 中的 script 标签来找到入口的 js 文件。
因此，我们在入口 HTML 中加入对 js/ts 文件的 script 标签引用：
<script type="module" src="/src/main.ts"></script>
它使用浏览器原生的ESM来加载该脚本，/src/main.js 就是入口js的源码位置。在 vite dev 模式启动时，它其实启动了一个类似静态服务器的 server，因此不需要像webpack那样的复杂模块打包过程。模块的依赖加载将完全依托于浏览器中对 import 语法的处理
3、环境变量的使用方式
developer.mozilla.org/zh-CN/docs/…
vite 仍然支持环境变量的使用，但不再提供 process.env 这样的访问方式。而是需要通过 import.meta.env来访问环境变量：
-const REPORTER_HOST = process.env.REPORTER_TYPE === 'mock'\
+const REPORTER_HOST = import.meta.env.REPORTER_TYPE === 'mock'\
? 'http://mock-report.xxx.com'\
: 'http://report.xxx.com';
