1 | # webpack-marauder
|
2 |
|
3 | [![npm](https://img.shields.io/npm/v/webpack-marauder.svg)](https://www.npmjs.com/package/webpack-marauder)
|
4 |
|
5 | 基于 webpack 的项目打包工具。
|
6 |
|
7 | `webpack-marauder` 的诞生离不开社区优秀的开源项目,本工具**持续跟进**并融合了 [create-react-app](https://github.com/facebook/create-react-app) 与 [vue-webpack](https://github.com/vuejs-templates/webpack) 的最佳配置,旨在为 `React`,`Vue` 以及 `Vanilla JS` 项目提供**一致性**的构建流程与开发体验。
|
8 |
|
9 | ## 安装
|
10 |
|
11 | > 注意:本项目使用了 async/await 特性依赖 Node.js 8.0 以上
|
12 |
|
13 | 为了保证多人开发时依赖安装的一致性,推荐使用 [yarn](https://yarnpkg.com/zh-Hans/) 作为包管理工具。
|
14 |
|
15 | 推荐使用本工具配套的脚手架生成项目,`webpack-marauder` 及相关配置已包含在项目模板中。
|
16 |
|
17 | - [组件脚手架 - spkg](https://github.com/SinaMFE/generator-spkg)
|
18 | - [项目脚手架 - mcli](https://github.com/SinaMFE/generator-mcli)
|
19 |
|
20 | ### 生成项目结构
|
21 |
|
22 | @TODO
|
23 |
|
24 | ### 安装依赖
|
25 |
|
26 | ```bash
|
27 | yarn add webpack-marauder -D
|
28 | ```
|
29 |
|
30 | ### 添加命令
|
31 |
|
32 | `package.json` 中配置 npm-script
|
33 |
|
34 | ```bash
|
35 | "scripts": {
|
36 | "dev": "marax dev",
|
37 | "build": "marax build"
|
38 | },
|
39 | ...
|
40 | ```
|
41 |
|
42 | ## 命令
|
43 |
|
44 | ### 启动开发环境
|
45 |
|
46 | 运行开发命令将本地启动一个开发服务器,默认基础端口为 `3022`。
|
47 |
|
48 | ```bash
|
49 | npm run dev [page_name]
|
50 | ```
|
51 |
|
52 | 当为多页应用时,dev 命令需传入参数 `page_name`,指定页面文件夹名称。
|
53 |
|
54 | 示例:
|
55 |
|
56 | ```bash
|
57 | # 在 index 页面下开发
|
58 | npm run dev index
|
59 | ```
|
60 |
|
61 | ### 打包项目
|
62 |
|
63 | 执行 `build` 命令打包页面,同 `dev` 命令,当为多页应用时,需指定页面文件夹名称。
|
64 |
|
65 | ```bash
|
66 | npm run build [page_name]
|
67 | ```
|
68 |
|
69 | #### FTP 上传
|
70 |
|
71 | 使用 ftp 上传功能,需在 `marauder.config.js` 中注册 ftp 账号信息。
|
72 |
|
73 | 在 `build` 命令基础上,可通过添加 `--ftp` 参数上传打包结果。此外,为方便多分支测试,还可通过可选的 `branch` 参数来指定线上分支路径。
|
74 |
|
75 | ```bash
|
76 | npm run build [page_name] --ftp [branch]
|
77 | ```
|
78 |
|
79 | 示例:
|
80 |
|
81 | ```bash
|
82 | # 打包 index 页面,并上传至测试地址
|
83 | npm run build index --ftp
|
84 |
|
85 | # 打包 index 页面,并通过上传至测试地址下的 feed_feature 文件夹中
|
86 | npm run build index --ftp feed_feature
|
87 | ```
|
88 |
|
89 | #### Test 发布
|
90 |
|
91 | 使用 Test 发布功能,需在 `marauder.config.js` 中注册 gitlab privateToken 信息。
|
92 |
|
93 | 在 `build` 命令基础上,可通过添加 `--test` 参数发布到测试环境。
|
94 |
|
95 | ```bash
|
96 | npm run build [page_name] --test [tag_message]
|
97 | ```
|
98 |
|
99 | ### 打包 dll 文件
|
100 |
|
101 | `marauder.config.js` 中配置 `vendor` 信息
|
102 |
|
103 | ```
|
104 | vendor: ['react', 'react-router']
|
105 | ```
|
106 |
|
107 | 运行 `dll` 命令生成公共资源包,执行结果将会输出到 `dist/vendor` 文件夹下
|
108 |
|
109 | ```bash
|
110 | npm run dll
|
111 |
|
112 | # 打包 dll 文件,并上传至文件服务器
|
113 | npm run dll --ftp
|
114 | ```
|
115 |
|
116 | ### 组件打包
|
117 |
|
118 | `webpack-marauder` 除了打包项目外,也可作为组件打包工具
|
119 |
|
120 | 在项目 `src` 文件夹中创建 `index.js` 文件作为组件入口
|
121 |
|
122 | npm-script 中配置
|
123 |
|
124 | ```json
|
125 | "build": "marax lib"
|
126 | ```
|
127 |
|
128 | 打包
|
129 |
|
130 | ```bash
|
131 | npm run build
|
132 | ```
|
133 |
|
134 | 打包后文件将在 `lib` 目录中输出
|
135 |
|
136 | ### 启动微信小程序 mpvue 开发环境
|
137 |
|
138 | `webpack-marauder` 除了可以做普通 web 开发,也支持小程序 mpvue 的开发环境,详情 mpvue 的使用方法见:`http://mpvue.com/`
|
139 |
|
140 | ```json
|
141 | "wx-dev": "marax wx-dev"
|
142 | ```
|
143 |
|
144 | ```
|
145 | npm run wx-dev
|
146 | ```
|
147 |
|
148 | 在项目 `src` 中会创建 wx 目录装载基本的 mpvue 的初始脚本,然后会在根目录生成`wx-dist`目录,使用微信开发者工具直接调试此目录即可。
|
149 |
|
150 | ### 微信小程序 mpvue 打包
|
151 |
|
152 | `json "wx-build": "marax wx-build"`
|
153 |
|
154 | 功能同`wx-dev`,会一次性在`wx-dist`下打包好 mpvue 构建的小程序代码。
|
155 |
|
156 | ## 教程
|
157 |
|
158 | ### 代码分割
|
159 |
|
160 | #### 动态代码分割
|
161 |
|
162 | @TODO
|
163 |
|
164 | #### 静态代码分割
|
165 |
|
166 | 此功能可零配置启用,凡是在 `view/<page_name>/` 下符合命名约定 `index.<chunk_name>.js` 的文件均会被视为 `chunk` 包拆分,拆分后的 bundle 文件以 `<chunk_name>.servant.js` 命名,这里称之为 `servant` 包。
|
167 |
|
168 | 其中 `chunk_name` 为拆分入口的名称,例如 `index.foo.js` 构建后将生成 `foo.servant.js`
|
169 |
|
170 | `<chunk_name>.servant.js` 文件将只会在生产环境(build)生成,在开发环境(dev)中,所有的 servant 将合并到 entry 中引入。对于使用者来说一切都是无感知的。
|
171 |
|
172 | **注意**
|
173 | 由于 entry bundle 中已经包含 `polyfill`(Promise,Object.assign),为了避免打包不必要冗余,通过此方式拆分出的 servant 包将不包含 polyfill 内容。为安全起见,建议将 servant 包置于 entry 之后引入(除非您清楚 servant 中不会触发兼容性问题),这也是取名为 `servant` 的本意。`webpack-marauder` 已为您默认配置好一切。
|
174 |
|
175 | #### 打包 vendor
|
176 |
|
177 | @TODO
|