统一管理多项目 webpack 配置文件

第 9 阶段：搞懂、搞透前端构建第 9 天

最近由于休假，晚上会有一些时间，争取把 webpack 这阶段更新完。

对于一个 30+ 的前端团队来说，前端项目可能有 50+ 个，如果每个项目单独管理 webpack 配置文件（webpack.dev.js 这类文件），如果遇到 webpack 升级、webpack 性能优化或其它因素时，修改 webpack 配置文件，需要耗费很大的人力。而且很难保证配置文件统一。

基于以上背景，我们来解决上面遇到的问题。

可以通过创建 npm 包让前端各个项目复用代码，我们可以把 webpack 的配置文件做成 npm 模块，这样就解决了上面遇到的问题，当创建新项目的时候，也不至于复制其它项目中 webpack 的配置文件，直接使用 npm 模块即可。这里我创建了三个 webpack 配置文件，配置文件中具体需要那些内容，视自身项目而定：

1、创建 webpack.base.js

base 用来处理各个 webpack 文件中共用的配置，主要做下面这些事情：

1>、解析 ES6；

2>、解析 css 预处理，比如 less、scss、stylus；

3>、解析图片、字体；

4>、解析主要的开发框架，比如 Vue、React；

5>、多页面入口；

6>、output 定义；

7>、html 模板处理；

下面是一个简单的 base 配置：