domagic-webpack-plugin

domagic-webpack-plugin

DOMagic 的 Webpack 适配插件。它复用 domagic-vite-plugin 中已经沉淀的核心能力：

• React / Vue DOM 元数据注入
• DOMagic runtime 浮层
• AI 修改样式接口
• Git 提交面板接口
• 本地规则 runner 与 CLI runner

这个包只负责 Webpack 外壳适配，不修改 Vite 版本的插件逻辑。

安装

npm install -D domagic-webpack-plugin domagic-vite-plugin

需要配合 html-webpack-plugin 注入 runtime：

npm install -D html-webpack-plugin

使用

import HtmlWebpackPlugin from 'html-webpack-plugin'
import { DOMagicWebpackPlugin } from 'domagic-webpack-plugin'

export default {
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({ template: './index.html' }),
    new DOMagicWebpackPlugin({
      pathMode: 'relative',
    }),
  ],
  devServer: {
    port: 3000,
  },
}

工作方式

• 开发模式下自动插入一个 pre loader，处理 .jsx、.tsx、.vue 文件。
• 通过 html-webpack-plugin 的 hooks 注入 DOMagic runtime。
• 通过 devServer.setupMiddlewares 挂载 DOMagic 本地接口。
• 生产模式 mode: 'production' 下默认不启用。

匿名指标上报（可选）

Webpack 适配复用 Vite 核心中间件。设置服务端环境变量 DOMAGIC_BUSINESS_REPORT_AK（可选配 DOMAGIC_BUSINESS_REPORT_BASE_URL、DOMAGIC_BUSINESS_REPORT_USER_EMAIL）即可开启匿名上报；未设置 AK 时自动禁用。当前 result_type 只上报 修改样式、修改业务代码 两个中文值，匿名 UUID 会放在额外文本字段里一起发送，不上传 prompt、源码、Token 或 API Key，上报失败不会阻断编辑。

选项

支持与 Vite 插件一致的基础配置：

new DOMagicWebpackPlugin({
  pathMode: 'relative',
  root: process.cwd(),
  agent: {
    provider: 'codex',
  },
})

也可以显式关闭：

new DOMagicWebpackPlugin({
  enabled: false,
})