@ezbuy/ezpack/doc/detail.md

`ezpack` 是公司内部中后台的打包工具，目前用到的项目有

* shield （ERP 前端）
* dgadmin
* 卖家后台

当时写这个工具的最大原因是中后台项目的构建都很类似，webpack 的配置又很繁琐。所以就在 webpack 上面封装了一层，希望能将项目的构建和发布都统一起来。

### 配置文件

每个项目根目录下面都有一个 `ezpack.config.js` 文件，具体可参考上面的项目。配置文件每个参数的说明可以看下 <http://localezstatic.65dg.me/ezpack/>。这里的文档也是由 `genDoc.js` 这个脚本通过读取源码里面各个字段的注释自动生成的。不过目前还需要手动发布。。。

### 开发模式

绝大部分的项目都是多页面的形式，所以参考了 next.js，在开发模式下面，只有访问到了那个页面，才会编译对应页面的代码。这部分的逻辑在 `startServer.ts` 的 `checkEntryForRoute` 方法。

开发模式的控制台界面，是参考了 [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard)，因为它不能提供界面的定制，所以基本是照着它的源码重写了一遍。具体的逻辑在 `devServer/dashboard` 这个目录下面。

想要比较详细了解上面两部分的童鞋可以看看我之前写的博客

* [动态加载 webpack entry](https://blog.leodots.me/post/9-dynamic-add-webpack-entry.html)
* [ezpack dashboard](https://blog.leodots.me/post/17-ezpack-dashboard.html)

### ezmok

ezpack 集成了 ezmok，可以给某个 api 接口自动生成接口数据。通过访问 `/ezmok` 路径进入控制台，然后在 `添加代理` 里面加入自己要 mock 的接口就可以。具体可以看看 [ezmok](http://git.ezbuy.me/ezbuyfe/ezmok) 的文档。

控制台里面还有一个 `api源管理`，可以更改接口的请求地址。可以把线上的地址加进去，这样就可以很方便地在本地调试线上的问题。

### sentry

ezpack 会在打包完之后，把 map 文件上传到 sentry 服务器上面。需要有一个统一的 [release](https://docs.sentry.io/clients/javascript/sourcemaps/#specify-the-release-in-raven-js) 版本号。目前的做法是通过时间去生成版本号，然后通过一个自己写的 `DefineGlobalPlugin` 插件把版本号注入到业务代码里面。下面是简单的代码逻辑。

```ts
this.sentryRelease = (+Date.now()).toString();

// upload sentry map
new SentryUpload(this.sentryRelease /* ... */);

// 配置 webpack plugin
const plugins = [
	// ...,
	new DefineGlobalPlugin({
		SENTRY_RELEASE: this.sentryRelease
	})
];
```

然后在业务代码里面，比如 shield

```ts
Raven.config(
	dsn,
	Object.assign({}, ravenOptions, {
		release: __webpack_global__.SENTRY_RELEASE
	})
).install();
```

目前生成的 map 文件都特别大，比如 antd 生成出来的 map 就有 2M 左右。所以目前这部分逻辑是被注释掉的。具体在 `EZPack.ts` 里面的 `uploadSentry`。