有没有办法将 Vite 与 HMR 一起使用并仍然在 /dist 文件夹中生成文件？

Question

首先，我想说，我已经开始使用 Vite 有一段时间了，而且我不是任何形式的 Vite 专家。

现在，关于我的问题：我正在开发一个 Chrome 扩展，它要求我在文件夹中生成文件/dist。使用 . 效果非常好vite build。但是，如果我尝试仅使用vite（以获得 HMR 的好处），则/dist文件夹中不会生成任何文件。所以我无法加载Chrome扩展程序。

如果有人遇到过类似的问题，或者知道我忽略的配置，请随时在这里分享。

谢谢！

Answer 1

build使用这个小插件，您将在每个热模块重新加载事件后得到一个：

在一个文件中hot-build.ts：

/**
 * Custom Hot Reloading Plugin
 * Start `vite build` on Hot Module Reload
 */
import { build } from 'vite'

export default function HotBuild() {

  let bundling = false
  const hmrBuild = async () => { 
    bundling = true
    await build({'build': { outDir: './hot-dist'}}) // <--- you can give a custom config here or remove it to use default options
  };

  return {
    name: 'hot-build',
    enforce: "pre",
    // HMR
    handleHotUpdate({ file, server }) {
      if (!bundling) {
        console.log(`hot vite build starting...`)
        hmrBuild()
          .then(() => {
            bundling = false
            console.log(`hot vite build finished`)
          })
      }  
      return []
    }
  }
}

然后在vite.config.js：

import HotBuild from './hot-build'

// vite config
{
  plugins: [
    HotBuild()
  ],
}