V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
onvno
V2EX  ›  程序员

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

  •  2
     
  •   onvno · 2018-05-20 02:06:10 +08:00 · 4185 次点击
    这是一个创建于 2410 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目及使用

    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 配置
    • 个人精力有限,难免测试不完整,希望伙伴提出问题&一同解决
    第 1 条附言  ·  2018-05-20 11:47:00 +08:00
    因为动图为了演示,缺了 npm install 依赖包和起工程这一步的时间,这里说明下
    第 2 条附言  ·  2018-05-20 11:52:30 +08:00
    总是觉得 webpack 不够彻底,如果从常规使用,就应该把 css,js,图片,hmr 这些常规的默认集成起来。所以 easypack 默认已经把这些勾选了。生成的配置文件其实可以读读看,想要二次增删还是比较方便的。
    第 3 条附言  ·  2018-05-20 11:56:36 +08:00
    关于使用代理的疑惑:
    * 服务是单独使用 express,所以和 webpack 耦合度很低,可以单独修改
    * proxy 默认支持多代理,还可以更改 header 提交请求,能够满足一般场合的需求
    * 如不想用默认的 peoxy,在上边的配置中取消勾选即可
    第 4 条附言  ·  2018-05-20 11:58:39 +08:00
    关于 DLL 预编译:
    DLL 预编译是 webpack 常见的比较公认的优化打包速度方案。关于使用:

    - 配置中 lodash 的那个位置是个 input 输入框,可以删除。如果多个,使用逗号分隔开就行,
    - 考虑到项目中的第三方包太多,所以把 dll 分成两个,一个是工具相关如 lodash 等,一个是框架相关,如 react-redux 等
    - 当然也可以不使用 dll,直接取消勾选 dll,这部分就置灰了。
    11 条回复    2018-05-21 00:02:01 +08:00
    oswuhan
        1
    oswuhan  
       2018-05-20 02:13:26 +08:00
    +1024 !

    同样是腰间盘,你为何如此突出。
    zhoufenfens
        2
    zhoufenfens  
       2018-05-20 04:50:20 +08:00
    万一要加减需求呢,比如这次用的 lodash,下次想换 underscore, 还有 proxy 的时候各种复杂的配置需求,
    BarZu
        3
    BarZu  
       2018-05-20 08:23:57 +08:00
    听说 webpack4 零配置,,,其实我想问的是,那个,上 appstore 是可以收费的吗?
    bojackhorseman
        4
    bojackhorseman  
       2018-05-20 09:10:10 +08:00 via Android
    @BarZu 4 是不用写环境,要是多入口,还得乖乖写配置。
    lihongjie0209
        5
    lihongjie0209  
       2018-05-20 10:39:15 +08:00
    js 不止造轮子, 还造轮子的轮子 666666666666
    onvno
        6
    onvno  
    OP
       2018-05-20 11:44:03 +08:00
    @zhoufenfens 其实配置中 lodash 的那个位置是个 input 输入框,可以删除。如果多个,使用逗号分隔开就行,

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

    当然也可以不使用 dll,直接取消勾选 dll,这部分就置灰了。
    onvno
        7
    onvno  
    OP
       2018-05-20 11:45:33 +08:00
    @BarZu webpack4 不是零配置,只是多了一些约定大于配置。比如增加了 mode 模式,默认使用 production,CommonChunk 做了新的配置处理。目前可能坑差不多了,可以升级取用了。
    onvno
        8
    onvno  
    OP
       2018-05-20 11:55:40 +08:00
    @zhoufenfens proxy 其实这里写的代码很少,是借用了之前同事做的 uba 工具的代理功能

    * 服务是单独使用 express,所以和 webpack 耦合度很低,可以单独修改
    * proxy 默认支持多代理,还可以更改 header 提交请求,能够满足一般场合的需求
    * 如不想用默认的 peoxy,在上边的配置中取消勾选即可
    onvno
        9
    onvno  
    OP
       2018-05-20 12:30:23 +08:00
    @BarZu 靠这个赚钱没意思。只是发布 appStore 要单独申请开通账号,上线流程也稍微有点麻烦,只是为了上线能及时通知更新版本而已。
    tinytin
        10
    tinytin  
       2018-05-20 16:02:29 +08:00 via iPhone
    能不能设置编译后的版本已经能不能像 babel preset env 设置编译后环境,还有生产环境压缩用 uglify 还是 babel minify
    onvno
        11
    onvno  
    OP
       2018-05-21 00:02:01 +08:00
    @tinytin 生产环境用的是 uglify。 目前做的配置是基本的,有不妥或不够优化的可以多多指教
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5472 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 01:28 · PVG 09:28 · LAX 17:28 · JFK 20:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.