趁着元旦，roadhog 2.0 发布了，我们一起来看看有啥变化吧。

👏 👏 👏
 

一、

首先，我们把底层重写，基于 af-webpack。

为啥要基于 af-webpack？单看 roadhog，这意义不大，但如果有数个工具都基于 af-webpack 做上层封装，那么就意味着 webpack 工具层的配置统一。 尤其对我们内部来说，有 4-5 个工具，每个工具有各自的配置方法，对于开发者来说无疑是个灾难。对外部的同学来说，umi 和 roadhog 都基于 af-webpack，那么之后在这两个工具之间切换，webpack 的配置层是无需变动的。

另外，大家会发现 roadhog 的 issue 维护不太积极，是因为我的工作重心目前不在这，而是在 umi 上。所以切换到 af-webpack，af-webpack 是 umi 的底层共建，这样就可以变相地保证我在这个项目上的投入。

同时，为了更通用，配置文件从 .roadhogrc 更名为 .webpackrc 。

二、

然后，在体验上，保持了和 create-react-app 最新版一致。像是 redbox 显示出错信息、HMR、出错点击后跳转到 IDE、ESLint 出错提示等等。

并在此基础上，增加了：

• 所有的配置都能自动生效（热更新或自重启）
• dev server 断线重连
• 配置项校验和提醒（同时出现在浏览器和控制台里）
• 配置文件语法错误提示到行
• ...

三、

roadhog 从命令的维度看，包含 dev (mock)，build，test。

变化是：

• 原 server 命令改名为 dev
• dev 和 build 主要是配置上的变化
• mock 保持不变
• test 从 mocha 改为 jest，同时支持 UI 组件的测试

四、

配置项即功能，这里有比较大的变化。

不再支持的有：

• multipage (use commons instead)
• autoprefixer (use browserslist instead)
• dllPlugin (学习成本太高，并且有其他方法可以提升 dev server 启动速度)
• svgSpriteLoaderDirs
• library
• libraryTarget
• cssModulesExclude

功能变化的有：

• publicPath（dev 模式下的也可覆写了）
• sass（值从 Boolean 改成 Object，内容为传给 node-sass 的配置项）

新的有：

• babel
• copy
• commons
• browserslist
• alias (总算加上了，因为我发现 babel 插件代替不了 alias，因为 babel 不处理 node_modules)
• devtool (可给生产环境开启 sourcemap 了)
• extraResolveModules
• manifest（生成 manifest.json）

五、

此外，还有一些变化：

• 不再支持通过 src/index.ejs 的方式生成 Html

六、

最后，我们对照 ant-design-pro 的升级 PR 来看下如何升级到 raodhog@2 。

对于大部分的应用来说，只要：

• 升级 roadhog 版本为 2.x
• 更名 .roadhogrc 为 .webpackrc
• 更名 roadhog server 为 roadhog dev

然后，由于内置了 babel@7，

• 如果你有用 babel-polyfill，更换为 @babel/polyfill
• 如果有 babel-runtime 依赖和配置了 babel-plugin-transform-runtime 插件，需删除，因为已内置处理，否则可能会报 this.setDynamic is not a function 的错误
• 由于 babel@7 无法使用 babel-plugin-add-module-exports，所有的 require('./file') 需改为 require('./file').default
• 如果有用 babel-plugin-dva-hmr，请升级到 0.4.x，

再然后，如果有 src/index.ejs，需要额外配置 html 属性，

"html": { "template": "./src/index.ejs" }

最后，有些配置不再支持，需考虑替代方案或使用 webpack.config.js 进行配置。

（完）