create-all

一条命令，选 Bundler、选框架、立刻开工。
Webpack / Vite / Rspack 统一入口 —— 交互体验对齐 create-vite，Webpack 侧提供 Vite 级 defineConfig + preset 工程化方案。

为什么用它

你还在为这些事纠结吗？

• 团队有人要 Vite，有人要 Webpack，有人要 Rspack —— 不想维护三套完全不同的脚手架
• 想要 create-vite 那种 30 秒建项 的流畅感，但 Webpack 项目往往配置冗长、依赖爆炸
• 新建 Webpack 项目时，webpack.config 动辄上百行，HMR / TS / 框架 loader 各配各的

create-all 的做法：

| 你选的 | create-all 的行为 | |--------|-------------------| | Vite | 直接交给官方 create-vite，完整原生能力（Router、RSC 等一个不丢） | | Rspack | 直接交给 create-rsbuild，完整原生交互 | | Webpack | 内置模板：4 步建项，生成 极简 package.json + 类 Vite 的 webpack.config.ts |

不是「又一个全家桶模板」，而是 Bundler 编排器 + Webpack 现代化 preset 体系。

30 秒开始

npm create all@latest

或指定目录名：

npx create-all my-app
cd my-app
npm install
npm run dev

全程交互式引导，无需记命令参数。

你会得到什么

Webpack 项目（核心亮点）

生成结果对标 create-vite 的「干净」：

• package.json 只写框架和类型 —— React / Vue / 类型定义 / webpack-common + 对应 preset
• webpack.config.ts 只有几行 —— defineConfig + presets: [react()]，和 vite.config 一样直观
• 构建链路由 webpack-common 内置 —— webpack、webpack-dev-server、@swc/core 等不必在项目里重复安装
• 开发体验 —— SWC 编译、框架 HMR（React Fast Refresh / Vue HMR 等）、Vite 风格构建日志

// 生成后的 webpack.config.ts —— 真的就这么短
import { defineConfig } from 'webpack-common'
import react from 'webpack-plugin-react'

export default defineConfig({
  presets: [react()],
  server: { port: 3000, open: true },
})

// 生成后的 package.json —— 只关心业务依赖
{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "typescript": "^5.0.0",
    "webpack-common": "^2.0.0",
    "webpack-plugin-react": "^0.1.0"
  }
}

Vite / Rspack 项目

选择后 立即委托官方 CLI，不阉割、不二次封装 —— 你拿到的就是生态里最正统的那套交互和模板。

交互长什么样

Webpack — 4 步结束

◇  Project name › my-app
◇  Select a bundler › Webpack + SWC
◇  Select a framework › React
◆  Select a variant › TypeScript ✓

Vite — 交给 create-vite

◇  Select a bundler › Vite
→  Delegating to create-vite...

Rspack — 交给 create-rsbuild

◇  Select a bundler › Rspack / Rsbuild
→  Delegating to create-rsbuild...

支持一览

| Bundler | 框架 | 变体 | 说明 | |---------|------|------|------| | Webpack | React · Preact · Vue · Svelte · Vanilla | TypeScript / JavaScript | 内置模板，开箱 HMR + 生产构建 | | Vite | 同 create-vite 全系 | 同 create-vite | 官方 CLI 完整能力 | | Rspack | 同 create-rsbuild 全系 | 同 create-rsbuild | 官方 CLI 完整能力 |

目录结构（Webpack + React 示例）

my-app/
├── public/
├── src/
│   ├── App.tsx          # 含 Counter 示例，改文件即可验 HMR
│   ├── main.tsx
│   └── index.css
├── index.html
├── package.json         # 极简依赖
├── tsconfig.json
└── webpack.config.ts    # defineConfig + preset

生态包（可单独使用，不绑 CLI）

| 包 | 作用 | |----|------| | webpack-common | 核心：defineConfig、dev server、构建、env、多页、库模式 | | webpack-plugin-react | React：SWC JSX + Fast Refresh | | webpack-plugin-preact | Preact：preact/compat 别名（配合 react preset） | | webpack-plugin-vue | Vue 3 SFC + SWC | | webpack-plugin-svelte | Svelte 5 | | webpack-plugin-vanilla | 纯 TS/JS | | webpack-plugin-h5 | H5 viewport / rem 适配 | | webpack-plugin-mf | Module Federation |

已有 Webpack 项目？只装 webpack-common + 对应 webpack-plugin-*，把配置迁到 presets 即可，不必从 create-all 重建。

适合谁

• 团队技术栈不统一，希望一个入口覆盖 Webpack / Vite / Rspack
• 从 Vite 迁到 Webpack（或共存），想要熟悉的 defineConfig 心智模型
• 厌倦复制粘贴 webpack 配置，想要可维护的 preset 插件化方案
• 新项目想快 —— npm create all@latest，选完就能 npm run dev

License

MIT