@ai-ins/webpack
AI Ins 的 Webpack 插件:注册 dev server 中间件、自动注入面板脚本,并在开发构建中给 JSX 元素标上源码位置。
在页面上点一下元素,说一句话,让本地的 AI 编码 Agent 直接改代码。
开发时按住 Option(Windows / Linux 是 Alt)点选页面元素,AI Ins 会把元素对应的源码位置和你的需求一起交给本机的 Agent CLI(Codex、Claude Code、Copilot、Gemini、Cursor),改完由热更新直接显示结果。只在开发态生效,生产构建里没有任何 AI Ins 代码。
安装
npx ai-ins # 自动安装并改好 webpack 配置
# 或手动:
npm i -D @ai-ins/webpack
// webpack.config.js(开发配置)
const { AiInsWebpackPlugin } = require('@ai-ins/webpack')
module.exports = {
devServer: {},
plugins: [new AiInsWebpackPlugin()],
}
有多个 Webpack 配置文件时,用 npx ai-ins --bundler webpack --config webpack.dev.js 指定 dev server 实际使用的那个。
使用
启动 dev server,打开页面。
按住 Option / Alt 点选元素,打开面板。
写下需求,按 ⌘ + Enter(Windows / Linux 为 Ctrl + Enter)发送。
前提是本机已经装好并登录至少一个 Agent CLI,比如能在终端里直接运行 codex 或 claude。建议把 .ai-ins 加进 .gitignore。
完整文档(多轮会话、改动与 diff、权限、配置项、环境变量):https://github.com/wangrongding/ai-ins
关于 @ai-ins/webpack 的常见问题@ai-ins/webpack 是什么? Webpack plugin for AI Ins.
如何安装 @ai-ins/webpack? 在项目目录运行 npm install @ai-ins/webpack,或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖:webpack(^5.0.0)、webpack-dev-server(^4.0.0 || ^5.0.0)。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖,Yarn 需要手动安装。
@ai-ins/webpack 支持 TypeScript 吗? 支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。
@ai-ins/webpack 支持 ESM 还是 CommonJS? 同时提供 ES Module 与 CommonJS 入口,import 和 require() 都可以使用,打包工具会自动选择合适的版本。
@ai-ins/webpack 可以商用吗? @ai-ins/webpack 使用 未声明 许可。package.json 没有声明许可证。没有许可证的代码默认保留全部权利,商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括,不构成法律意见,请以许可原文为准。
@ai-ins/webpack 的下载量有多少? 根据 npm 官方下载统计,@ai-ins/webpack 在 2026/10/05 – 2026/11/03 这 30 天内被下载 1,726 次,日均约 58 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。
@ai-ins/webpack 还在维护吗? 最新版本 1.0.8 发布于 2026/10/31(9 天前);至今共发布 26 个版本,其中过去 12 个月发布了 26 个;首次发布于 2026/05/03。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。