前言：老项目的升级烦恼

别说我这把年纪了碰到老项目总会叹口气。 代码堆得像山，构建工具还停留在 Webpack 那套。 听说 Rspack 超快，可是迁移成本怕是高得吓人。 别急，咱们今天聊的就是怎么让 Codex 帮你一步步升级。 说实话，这事儿跟请厨师Zuo饭差不多——配方要对，火候要掌握好。 哈哈，先把心态调好，别把自己逼得太紧。

第一件事，咱们得明确“升级到底要干啥”。 不是随便把 webpack.config.js 改成 rspack.config.js 那么简单。 老项目里有 alias、less、svg sprite、cdn 路径…这些dou不Neng丢。 所以我们要写一份 PDR，列出必保留的行为和必须改动的点。 不对不对，我刚才说的 PDR，其实就是给 Codex 的任务清单。 它会根据清单逐项检查、修改、跑构建，然后再回来报告结果。

打开终端，先让 Codex 扫描仓库： /goal 读取项目结构并生成初步 PDR 它会把旧的 webpack 配置解析成 JSON 树，再映射到 Rspack 的 schema 上。 这一步hen关键，因为Ru果映射错了后面全dou跑偏。 我曾经直接让 AI 写 config，结果构建报错——原因是忘记了 tsconfig 中的路径别名。 于是我又补了一句：“别忘了 alias，要跟 tsconfig 对齐”。Codex 马上修正了。

下面是一段Zui小化的 rspack.config.js 示例： js module.exports = {   entry: './src/index.js', // 入口保持不变   output: { path: __dirname + '/dist', publicPath: '/static/' }, // 公共路径保持   resolve: { alias: { '@': path.resolve } }, // 别名同步   module: { rules: } ] }, // less 保持   plugins: // 常量注入 }; 注意，这里用了 Rspack 原生插件而不是 webpack 插件；Ru果还有 antd-mobile 的自定义 less，需要加上对应 loader 配置。 哈哈，这段代码Ke以直接复制粘贴进项目里跑一次kankan效果。

Less 那块常见问题是变量冲突和 inline JavaScript 被禁用。 Codex 会自动把 less-loader 的 `javascriptEnabled` 打开，然后在必要时加上自定义函数替代原来的 JS 表达式。 我之前忘记关掉 `javascriptEnabled`，结果报错——后来让我 Codex 把它改回 `false`，再手动加一个插件处理变量就好了。

SVG sprite 也hen挑剔，需要保持 symbol 的 viewBox 不被裁剪。 Codex 会在配置里加上 `rspack-svg-symbol-loader` 并设置 `preserveAttributes:true`。

EJS 模板文件Ru果引用了 CDN 地址，需要在生产环境把 `publicPath` 替换成实际域名。 这时候Ke以让 Codex 写一个小脚本，在构建后自动替换占位符。

这个问题经常被问到，其实原因蛮简单：搜索引擎爬虫默认只抓取静态 HTML 页面而我们的构建产物大多是 SPA 单页应用，没有预渲染的 HTML 内容。

解决办法有两条：第一，在服务器端Zuo SSR 或者使用 prerender.io 类似的预渲染服务；第二，在页面 `` 加入 `` 暂时屏蔽，然后等内容完整后再放行。