Weex+Vue项目基于Webpack的一站式构建方案

方案简介

easywebpack-weex 是 Weex 生态中的构建工具链方案，把 Weex、Vue 与 Webpack 组合起来，为 Weex + Vue 项目提供统一的 build 解决方案。配合 Apache 官方的 incubator-weex-loader（一个面向 Weex 的 webpack loader），开发者无需从零编写复杂的 Webpack 配置即可完成 Weex 页面的编译打包，适合使用 Webpack 工程体系的 Weex 前端团队。

亮点与能力

• 提供 Weex + Vue + Webpack 的整体 build 解决方案
• 基于 easywebpack 体系封装，简化 Webpack 配置
• 搭配官方 incubator-weex-loader 处理 Weex 文件
• 属于 easy-team 维护的 easywebpack 系列工具

组成与分工

• Webpack：通用打包器，负责模块打包与构建流程
• Weex：跨平台 UI 框架，是构建的目标产物形态
• Vue：页面组件编写框架
• easywebpack-weex：针对 Weex 场景封装好的 Webpack 构建配置方案
• incubator-weex-loader：Apache 官方的 webpack loader，让 Webpack 能编译 Weex 文件

使用与配置要点

在 Weex + Vue 项目中引入 easywebpack-weex 作为构建配置层，并在 Webpack 配置中使用 incubator-weex-loader 处理 Weex/Vue 单文件组件，即可通过统一的 build 命令输出 Weex bundle。两者仓库分别为 https://github.com/easy-team/easywebpack-weex 与 https://github.com/apache/incubator-weex-loader，具体配置见各自文档。

优缺点

• ✓ 配置封装开箱即用
• ✓ 官方loader保证兼容
• ✕ 绑定Webpack体系
• ✕ 配置定制需懂Webpack

出处

本方案挖掘自开源项目 joggerplus/awesome-weex，方案内容与实施命令均来自其 README 原文。