QClaw默认启用轻量级零配置模式，需通过自然语言指令或CLI命令手动生成Webpack/Vite配置：Vite配置含端口、HTTPS、别名；Webpack配置含入口、输出、loader、插件；支持双配置并行生成及实时校验。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在使用QClaw生成前端项目时需要适配不同构建工具，但发现默认输出未包含Webpack或Vite的完整配置文件，则可能是由于QClaw当前模板策略默认启用轻量级零配置模式。以下是针对Webpack和Vite两种主流构建工具的手动配置生成方法：
一、生成Vite配置文件
Vite配置以vite.config.ts或vite.config.js为核心，依赖ESM原生机制，启动快且无需预打包。QClaw虽不自动注入完整配置，但可通过自然语言指令触发生成。
1、在QClaw输入框中输入：“创建一个React+TypeScript项目，使用Vite构建，端口设为3002，启用HTTPS，配置别名@指向src目录”。
2、确认执行后，QClaw将自动生成vite.config.ts，内容包含server.https、resolve.alias及plugins等关键字段。
立即学习“前端免费学习笔记（深入）”；
3、检查生成的package.json中是否已写入"dev": "vite"与"build": "tsc && vite build"脚本。
二、生成Webpack配置文件
Webpack需显式定义入口、输出、loader与插件链，QClaw支持通过结构化描述生成符合生产环境要求的webpack.config.js。
1、向QClaw发送指令：“生成Webpack 5配置：入口为src/index.tsx，输出到dist目录，启用SourceMap，添加Babel-loader处理TSX，使用HtmlWebpackPlugin注入index.html”。
2、QClaw解析语义后，生成含mode: 'development'、devtool: 'source-map'、module.rules及plugins数组的完整配置。
3、验证生成文件中resolve.extensions是否包含['.tsx', '.ts', '.js']，确保TS模块解析无误。
三、混合构建工具双配置生成
当项目需同时支持Vite开发与Webpack部署（如遗留系统对接），QClaw可并行输出两套配置，避免手动迁移风险。
1、输入：“为同一项目生成Vite开发配置和Webpack生产配置，Vite端口3000，Webpack输出dist/bundle.js，CSS提取为独立文件”。
2、QClaw将在项目根目录下分别创建vite.config.ts与webpack.config.prod.js两个文件。
3、检查webpack.config.prod.js中是否集成MiniCssExtractPlugin，且rules中CSS处理使用MiniCssExtractPlugin.loader替代style-loader。
四、基于QClaw CLI手动注入配置
若自然语言指令未覆盖特定需求，可调用QClaw内置CLI命令直接写入标准配置模板。
1、在终端执行：qclaw init --tool vite --template react-ts --port 3003，该命令将初始化含TypeScript支持的Vite配置。
2、运行：qclaw init --tool webpack --version 5 --react，生成兼容React生态的Webpack 5基础配置。
3、确认node_modules中是否安装对应依赖：vite、@vitejs/plugin-react或webpack、webpack-cli、html-webpack-plugin。
五、配置校验与调试支持
QClaw提供配置有效性实时反馈，避免语法错误或版本冲突导致构建失败。
1、在QClaw编辑器中打开任意生成的配置文件，点击右上角Verify Config按钮。
2、系统将运行类型检查与路径解析测试，并高亮提示：“警告：resolve.alias中@路径未指向有效目录，请确认src文件夹存在”。
3、对vite.config.ts执行qclaw check --vite，输出包括ESM兼容性、HMR模块白名单、环境变量前缀等12项检测项。
