如何配置Vite为Chrome DevTools Extension输出独立单包文件？

Vite底层依赖Rollup完成打包逻辑，Rollup默认会将多个入口共享的代码抽取为独立的公共chunk。你的background.ts和devtools.ts都引用了devtools-shared.ts，因此这段共享代码会被单独打包为独立文件，各入口文件内自然会保留对公共chunk的import语句。

你不需要开启库模式，仅需修改Rollup配置禁用公共chunk提取，让每个入口把依赖的所有代码内联打包到自身文件中即可，修改后的vite.config.js配置如下：

const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
  resolve: {
    alias: {
      "root": resolve(__dirname),
      "@": resolve(__dirname, "src")
    }
  },
  esbuild: {
    keepNames: true
  },
  build: {
    rollupOptions: {
      input: {
        'background': "src/background.ts",
        'content-script': "src/content-script.ts",
        'devtools': "devtools.html",
        'panel': "panel.html",
      },
      output: {
        entryFileNames: chunkInfo => {
          return `${chunkInfo.name}.js`
        },
        // 关键配置：禁用默认的公共chunk提取逻辑
        manualChunks: undefined,
        // 输出ES格式脚本，无导入导出时就是普通顶层脚本，符合你的需求
        format: 'es'
      },
      treeshake: false
    },
    minify: false
  }
})

• 配置修改后构建生成的所有入口文件都会包含自身需要的全部代码，不会再出现外部import语句，完全自包含。
• 如果你使用Manifest V3的背景服务工作者，由于打包后的脚本已经没有模块语法，无需额外在manifest中配置"type": "module"。
• 库模式会额外生成导出适配代码，反而不符合扩展脚本的使用场景，不需要开启。
• HTML类型入口（devtools.html、panel.html）不需要额外配置，上述规则对HTML中引用的脚本同样生效。

内容的提问来源于stack exchange，提问作者steinybot