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

【问题标题】：Is there a way to use Vite with HMR and still generate the files in the /dist folder?有没有办法将 Vite 与 HMR 一起使用，并且仍然在 /dist 文件夹中生成文件？
【发布时间】：2021-10-19 21:49:49
【问题描述】：

首先，我想说的是，我很早就开始使用 Vite，但我不是任何形式的 Vite 专家。

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

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

谢谢！

【问题讨论】：

标签： vite

【解决方案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()
  ],
}

【讨论】：

感谢您的想法！但是在我的测试应用程序中，HMR 不再使用这个插件了。此外，它仅在应用程序代码中的更改写入文件，而不是在开发服务器启动时写入文件。