项目地址
[easy-pack](onvno/easy-pack)
项目演示
初衷
项目中都会用到 webpack,但每个项目的重复配置太多,还经常会因为某个版本升级,导致原先的配置失效,重新花时间去整理。 很多 webpack 工具或者 CLI 都把配置包装起来,不利于二次开发,遂想把webpack配置模块化,简单化,可视化。
EasyPack只专注在构建方面,目前基于webpack3构建开发
- 效率:避免重复配置的工作
- 交互便捷:实现可视化操作
- 人性化:直接暴露配置,方便修改
- 专注开发
关于脚手架
默认约定src作为开发目录,dist为build构建目录,dev为dll开发阶段预编译存放目录。
目前src目录下只提供基本的测试demo,不提供完整的脚手架服务,原因有二:
- 每个FE心中都有一套自己认为合理舒服的目录结构
- 个人精力有限
配置
- 支持es6/react/vue
- 支持less/scss/postcss
- 支持热更新
- 支持DLL预编译,cacheloader优化
- 支持proxy&mock数据
其他
- todo: 如果反响不错,后续会增加webpack4 & 上线AppStore
- 感谢uba的mock和proxy配置
- 个人精力有限,难免测试不完整,希望伙伴提出问题&一同解
补充
- 总是觉得 webpack 不够彻底,如果从常规使用,就应该把 css,js,图片,hmr 这些常规的默认集成起来。所以 easypack 默认已经把这些勾选了。生成的配置文件其实可以读读看,想要二次增删还是比较方便的。
- 关于使用代理的疑惑:
* 服务是单独使用 express,所以和 webpack 耦合度很低,可以单独修改
* proxy 默认支持多代理,还可以更改 header 提交请求,能够满足一般场合的需求
* 如不想用默认的 peoxy,在上边的配置中取消勾选即可
- 关于 DLL 预编译: * DLL 预编译是 webpack 常见的比较公认的优化打包速度方案
* 配置中 lodash 的那个位置是个 input 输入框,可以删除。如果多个,使用逗号分隔
* 考虑到项目中的第三方包太多,所以把 dll 分成两个,一个是工具相关如 lodash 等,一个是框架相关,如 react-redux 等
* 当然也可以不使用 dll,直接取消勾选 dll,这部分就置灰了。