本文介绍了umi框架的打包过程，umi通过加载用户配置和插件生成路由配置，并基于此进行JS/CSS及HTML的串联。umi的打包底层依赖roadhog和Webpack。重点讨论了如何配置umirc.js或config.js以适应不同环境，包括设置环境变量和使用plugin。还提到了常用配置如uglifyJSOptions、proxy和chainWebpack，并指出umi的路由管理与其他工具类似。
1、umi的组成与作用
umi的定位既是一个打包构建发布的框架，也是拥有路由管理相关能力的框架，这些能力的拥有得益于它内外集成了50+个插件，让它的功能具有多样性，从打包到支持路由级的按需加载和code splitting，“无所不能”这几个字在这个集成框架里使用也不为过，
下面是umi打包源码到发布的流程。
umi 首先会加载用户的配置和插件，然后基于配置或者目录，生成一份路由配置，再基于此路由配置，把 JS/CSS 源码和 HTML 完整地串联起来。用户配置的参数和插件会影响流程里的每个环节
2、umi的打包配置
umi的底层打包是依赖于roadhog，然后roadhog又是基于webpack封装的工具，所以只要你熟悉webpack的配置，上手umi的打包配置也是不难的。
umirc.(js|ts) 和 config/config.(js|ts)是决定umi打包配置的重要配置文件，两者只能使用其中一个，一般我们会选择config形式来配置，因为配置形式比较让我们觉得熟悉，如下图
如上图所示，我们由于打包时往往要区分不同环境，如果我们只有一份config.js，是不足以满足的，只有一份的配置的话，我们需要在这份js里根据env环境变量来判断调用不同plugin或者loader，这样会让代码混杂太多ifelse判断，配置会非常不清晰，所以我们需要建立不同环境的config.js，当运行npm命令时，使用不同运行命令
最低0.47元/天 解锁文章
3215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
