vite的入口

vite的entry相对于其他构建工具是特别的。

vite的默认入口是根目录下的index.html文件
而webpack需要配置entry入口，通常是index.js，另外需要配合使用webpackHtmlPlugin插件
同时vite也支持配置多入口（多页应用），vite打包多页应用比webpack要简单
webpack配置多个entry时，如果只配置一个index.html,所有entry的js都会插入到这个index.html，所以webpack配置多个entry的同时还需要配置多个index.html。而vite配置多个input就行了。

// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'


export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        nested: resolve(__dirname, 'nested/index.html')
      }
    }
  }
})

script手动插入入口js即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/react/Main.tsx"></script>
  </body>
</html>

实际上，在项目第一次启动时，Vite 会默认抓取项目中所有的 HTML 文件（如当前脚手架项目中的index.html），将 HTML 文件作为应用入口，然后根据入口文件扫描出项目中用到的第三方依赖，最后对这些依赖逐个进行编译。

那么，当默认扫描 HTML 文件的行为无法满足需求的时候，比如项目入口为vue格式文件时，你可以通过 entries 参数来配置:

// vite.config.ts
{
  optimizeDeps: {
    // 为一个字符串数组
    entries: ["./src/main.vue"];
  }
}

# vite的入口

vite的入口