V2EX = way to explore V2EX 是一个关于分享和探索的地方
Sign Up Now For Existing Member Sign In
请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 2912 days ago, the information mentioned may be changed or developed.
项目及使用
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 配置
- 个人精力有限，难免测试不完整，希望伙伴提出问题&一同解决
Supplement 1 May 20, 2018
因为动图为了演示，缺了 npm install 依赖包和起工程这一步的时间，这里说明下
Supplement 2 May 20, 2018
总是觉得 webpack 不够彻底，如果从常规使用，就应该把 css,js,图片,hmr 这些常规的默认集成起来。所以 easypack 默认已经把这些勾选了。生成的配置文件其实可以读读看，想要二次增删还是比较方便的。
Supplement 3 May 20, 2018
关于使用代理的疑惑：
* 服务是单独使用 express,所以和 webpack 耦合度很低,可以单独修改
* proxy 默认支持多代理，还可以更改 header 提交请求，能够满足一般场合的需求
* 如不想用默认的 peoxy,在上边的配置中取消勾选即可
* 服务是单独使用 express,所以和 webpack 耦合度很低,可以单独修改
* proxy 默认支持多代理，还可以更改 header 提交请求，能够满足一般场合的需求
* 如不想用默认的 peoxy,在上边的配置中取消勾选即可
Supplement 4 May 20, 2018
关于 DLL 预编译：
DLL 预编译是 webpack 常见的比较公认的优化打包速度方案。关于使用：
- 配置中 lodash 的那个位置是个 input 输入框，可以删除。如果多个，使用逗号分隔开就行，
- 考虑到项目中的第三方包太多，所以把 dll 分成两个，一个是工具相关如 lodash 等，一个是框架相关，如 react-redux 等
- 当然也可以不使用 dll,直接取消勾选 dll,这部分就置灰了。
DLL 预编译是 webpack 常见的比较公认的优化打包速度方案。关于使用：
- 配置中 lodash 的那个位置是个 input 输入框，可以删除。如果多个，使用逗号分隔开就行，
- 考虑到项目中的第三方包太多，所以把 dll 分成两个，一个是工具相关如 lodash 等，一个是框架相关，如 react-redux 等
- 当然也可以不使用 dll,直接取消勾选 dll,这部分就置灰了。
 | 1 oswuhan May 20, 2018 +1024 ！ 同样是腰间盘，你为何如此突出。 |
 | 2 zhoufenfens May 20, 2018 万一要加减需求呢，比如这次用的 lodash,下次想换 underscore， 还有 proxy 的时候各种复杂的配置需求， |
 | 3 BarZu May 20, 2018 听说 webpack4 零配置，，，其实我想问的是，那个，上 appstore 是可以收费的吗？ |
 | 5 lihongjie0209 May 20, 2018 js 不止造轮子, 还造轮子的轮子 666666666666 |
 | 6 onvno OP @zhoufenfens 其实配置中 lodash 的那个位置是个 input 输入框，可以删除。如果多个，使用逗号分隔开就行， 考虑到项目中的第三方包太多，所以把 dll 分成两个，一个是工具相关如 lodash 等，一个是框架相关，如 react-redux 等 当然也可以不使用 dll,直接取消勾选 dll,这部分就置灰了。 |
| 7 onvno OP @BarZu webpack4 不是零配置，只是多了一些约定大于配置。比如增加了 mode 模式，默认使用 production，CommonChunk 做了新的配置处理。目前可能坑差不多了，可以升级取用了。 |
 | 8 onvno OP @zhoufenfens proxy 其实这里写的代码很少，是借用了之前同事做的 uba 工具的代理功能 * 服务是单独使用 express,所以和 webpack 耦合度很低,可以单独修改 * proxy 默认支持多代理，还可以更改 header 提交请求，能够满足一般场合的需求 * 如不想用默认的 peoxy,在上边的配置中取消勾选即可 |
 | 10 tinytin May 20, 2018 via iPhone 能不能设置编译后的版本已经能不能像 babel preset env 设置编译后环境，还有生产环境压缩用 uglify 还是 babel minify |
Select Language