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

文章插图

扩展webpack配置使用方式
通过开发webpack插件，将配置中的entry动态插入html中
a) 将自定义配置项与webpack配置结合；
b) 读取配置中的entry ， files字段，在插件中将entry中的资源配置到对应的files上。

文章插图

5、不同类型资源使用不同的cdn路径
由于webpack的publicPath配置后，所有静态资源的路径都为当前配置的publicPath 。为了满足不同资源有不同的cdn配置，所以通过插件修改：
a)通过html-webpack-plugin的暴露出的hooks事件(beforeAssetTagGeneration) ，对assets.js ， assets.css的路径重写；
b) 由于在webpack打包后， js文件的加载路径是通过__webpack_require__.p拼接的，因此修改其值为js cdn的路径。

文章插图

6、扩展的功能插件
目前团队内扩展了多个插件，用于对项目功能的扩展：

service worker插件，提供PWA能力；
错误捕获babel插件，为项目代码添加try-catch ，并配合金融日志系统进行错误上报。

总结
脚手架及打包脚本已推广至金融前端部门所有项目使用，目前使用的项目有260+ ，组件55+ 。
提升了前端团队开发效率，带来以下好处：

技术栈一致、基础类库一致；
项目交接方便；
高扩展性；
快速创建项目，零配置运行，专注于业务开发。

后续仍会持续关注业内其他优秀的解决方案，不断优化，使开发更高效、提升开发质量。

参考文献：
https://www.npmjs.com/package/react-scripts/v/0.2.2
https://github.com/webpack/webpack/releases/tag/v4.42.1

作者简介：
坑红艳，金融公司前端技术部开发工程师，负责金融支付和基础平台前端开发。

【58金融前端脚手架的设计与实现】