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

[onvno]

项目及使用

https://github.com/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 配置
• 个人精力有限，难免测试不完整，希望伙伴提出问题&一同解决

因为动图为了演示，缺了 npm install 依赖包和起工程这一步的时间，这里说明下

总是觉得 webpack 不够彻底，如果从常规使用，就应该把 css,js,图片,hmr 这些常规的默认集成起来。所以 easypack 默认已经把这些勾选了。生成的配置文件其实可以读读看，想要二次增删还是比较方便的。

关于使用代理的疑惑：
* 服务是单独使用 express,所以和 webpack 耦合度很低,可以单独修改
* proxy 默认支持多代理，还可以更改 header 提交请求，能够满足一般场合的需求
* 如不想用默认的 peoxy,在上边的配置中取消勾选即可

关于 DLL 预编译：
DLL 预编译是 webpack 常见的比较公认的优化打包速度方案。关于使用：

- 配置中 lodash 的那个位置是个 input 输入框，可以删除。如果多个，使用逗号分隔开就行，
- 考虑到项目中的第三方包太多，所以把 dll 分成两个，一个是工具相关如 lodash 等，一个是框架相关，如 react-redux 等
- 当然也可以不使用 dll,直接取消勾选 dll,这部分就置灰了。

[oswuhan]

+1024 ！

同样是腰间盘，你为何如此突出。

[zhoufenfens]

万一要加减需求呢，比如这次用的 lodash,下次想换 underscore， 还有 proxy 的时候各种复杂的配置需求，

[BarZu]

听说 webpack4 零配置，，，其实我想问的是，那个，上 appstore 是可以收费的吗？

[dumbass]

@BarZu 4 是不用写环境，要是多入口，还得乖乖写配置。

[lihongjie0209]

js 不止造轮子, 还造轮子的轮子 666666666666

[onvno]

@zhoufenfens 其实配置中 lodash 的那个位置是个 input 输入框，可以删除。如果多个，使用逗号分隔开就行，

考虑到项目中的第三方包太多，所以把 dll 分成两个，一个是工具相关如 lodash 等，一个是框架相关，如 react-redux 等

当然也可以不使用 dll,直接取消勾选 dll,这部分就置灰了。

[onvno]

@BarZu webpack4 不是零配置，只是多了一些约定大于配置。比如增加了 mode 模式，默认使用 production，CommonChunk 做了新的配置处理。目前可能坑差不多了，可以升级取用了。

[onvno]

@zhoufenfens proxy 其实这里写的代码很少，是借用了之前同事做的 uba 工具的代理功能

* 服务是单独使用 express,所以和 webpack 耦合度很低,可以单独修改
* proxy 默认支持多代理，还可以更改 header 提交请求，能够满足一般场合的需求
* 如不想用默认的 peoxy,在上边的配置中取消勾选即可

[onvno]

@BarZu 靠这个赚钱没意思。只是发布 appStore 要单独申请开通账号，上线流程也稍微有点麻烦，只是为了上线能及时通知更新版本而已。

[tinytin]

能不能设置编译后的版本已经能不能像 babel preset env 设置编译后环境，还有生产环境压缩用 uglify 还是 babel minify

[onvno]

@tinytin 生产环境用的是 uglify。 目前做的配置是基本的，有不妥或不够优化的可以多多指教