58金融前端脚手架的设计与实现( 二 ) _前端

初版的配置功能主要如下：

统一分包逻辑：runtime.js 项目启动文件、vendor.js 基础库包、入口文件chunk、异步加载chunk；
仅支持单页应用；
webpack基础配置：dev环境下的hotReload；es6、scss等编译；build压缩等基本功能。

但在实际使用中发现，仅仅是完成项目中的webpack配置已经远远不够，为了丰富脚本内容，提升开发体验，因此在社区内寻找优秀的框架。恰好当时react官方发布了create-react-App这个一键生成react项目的工具，通过查看create-react-app eject后的项目配置（ 0.3.x 版本），发现其已经提供非常丰富的功能，正好弥补我们开发的不足，如：

开发环境下自动启动浏览器运行页面、端口号检测
react-dev-utils 提供多种插件和工具方法来提升开发体验: ，比如：

开发环境下代码出错时提供友好的提示信息；
可视化展示build后的资源大小以及与上次build后资源大小的对比；
格式化webpack输出的资源信息；
清空终端console信息；
接口代理配置和webpack-dev-server的结合；

通过使用env配置来实现不同环境下的差异化配置
单元测试Jest的基础配置及运行
......

最终我们考虑将现有配置和react官方提供的脚本融合，提取出一套适用于金融前端团队使用的react打包脚本。除包含以上基本功能外，提供了如下能力（主要）：

提供自定义config ，开放部分webpack配置，如plugin、alias
支持typescirpt
支持多页
分包优化
开发环境下browserRouter支持
外链资源自动插入到html中，并与externals配置结合
jest配置
内置mock server

更多内容详见 https://www.npmjs.com/package/earth-scripts
由于积极跟进社区变化并及时更新，不断调整配置、使用体验、丰富功能，目前，该脚本已进行了3个重要大版本更新， 100+次历史小版本迭代，已满足目前团队内所有项目的打包需求。

文章插图

实现过程1、支持多页应用
项目的应用场景是多个或一个单页应用，为此，规定了项目src下的文件结构，兼容多页和原有的单页模式打包。

文章插图

打包时读取src下的文件结构，如果无pages ，则使用单页模式，如果有pages ，并且和html的模版文件一致，则使用多页模式打包。将对应文件夹下的index作为入口文件，多页面即多个入口，动态配置webpack入口文件，同时使用html-webpack-plugin创建多个插件实例生成对应的html
2、分包优化
在升级至webpack4后， webpack本身提供了默认分包策略，同时我们也自定义了splitChunks的配置，并配置了分包优先级，最大化利用缓存。
提供分包配置入口，业务可自行决定将某些module在打包时打到vendor工具包中。
不建议将所有的node_modules下的包都打到一个文件里，因为除基础库外也有我们的组件包，组件是有一定的更新频率的，当组件更新了，这个工具包又会重新打包，生成新的chunkhash ，这样就失去了缓存的意义。
因此，拆分出common和vendor两个包，业务代码和基础工具包分离：

文章插图

3、开发环境下browserRouter支持
为了在开发环境也可以使用html5的browserRouter ，在webpack-dev-server中对页面路径做了重定向。
在检测到一级路由是项目中pages文件夹下对应的路径，如/pages/user ，当访问http://localhost:3000/user.html或者http://localhost:3000/user/xx时则直接返回对应的html ，例如，在本例子中为user.html 。