EasyPack - 也许是最方便的 webpack 构建工具

1,413 阅读2分钟

项目地址

[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,这部分就置灰了。