UNPKG

5.57 kBMarkdownView Raw
1# html-bundler
2
3### 面临的业务困境
4
5### Why html-bundler
6目前最流行的打包工具是webpack和gulp，都有着良好的生态和海量的用户，但是在我们使用的过程中发现了以下一些问题：
7
8- webpack的上手难度较高,配置和学习成本都很高
9- 所有资源都用webpack打包的情况下性能较差，比如改行样式等10秒这种非常常见
10- gulp虽然上手简单，但是插件众多，如何进行选择和最佳实践是一个大问题
11- 每做一个项目都需要修改构建程序.
12
13html-bundler的特点：
14
15- html-bundler以html为入口文件，自动寻找引入的资源文件进行构建处理，这对绝大多数项目是通用的.
16- 通过一个简单易理解的配置文件使得构建流程可配置。
17- 一些简单的项目可以直接只做简单的less => css转换，production模式进行压缩合并以及版本号处理即可
18- 复杂的项目则引入webpack对js进行模块化的处理，并暴露接口让用户自己修改webpack配置文件
19- 集成了一些优化和日志工具，提升构建的性能和可维护性
20
21
22
23### Globle Mod
24适用于一些只需要简单压缩合并的活动项目，或者一些demo页
25
26```sh
27npm install html-bundler -g
28```
29
30```sh
31hb create project
32hb create project -w //add webpack.config.js local
33```
34
35
36```sh
37cd project && npm install
38```
39
40
41```sh
42hb dev -p 8080
43```
44
45
46```sh
47hb dest
48```
49
50### Local Mod
51适用于正式项目
52
53```sh
54cd your-project
55npm install html-bundler --save-dev
56```
57
58自动生成html-bundler.config.js
59
60```sh
61npm install html-bundler -g
62hb init
63hb init -w //自动生成webpack.config.js
64```
65
66create a js file (e.g: bundle.js)and write:
67
68```js
69require('html-bundler')
70
71```
72
73```sh
74node bundle.js dev -p 8080
75```
76
77```sh
78node bundle.js dest
79```
80
81### 配置文件解析
82```js
83/* eslint-disable */
84module.exports = {
85 src: './src', //源代码所在路径
86
87 entries: ['./src/html/**', './src/*.html'], //html入口文件
88
89 ignore: ['./src/js/lib', './src/css/lib'], //不进行任何处理的路径
90
91 imgFolder: './src/imgs', //图片目录
92
93 moveList: ['./src/fonts', './src/a.js'], //需要平移的目录和文件
94
95 devMod: { //开发模式
96 output: './dev', //开发模式下打包后的输出位置
97 minify: false, //是否最小化，如果开启，则js、css都会进行压缩
98 minifyHTML: false, //是否压缩html，如果开启，则会对html文件进行压缩
99 bundle: true, //是否使用webpack进行打包
100 concat: false, //是否合并文件
101 sourcemap: true, //是否进行sourcemap
102 less: true, //是否进行less预处理
103 inline: false, //是否把所有资源打成inline（目前不能和bundle配合使用）
104 watchFolder: { //文件分类进行监听，这样修改js不会编译css，提高性能
105 css: ['./src/css'],
106 js: ['./src/js'],
107 imgs: ['./src/imgs'],
108 html: ['./src/html']
109 },
110 custom: { //自定义任务, 格式样例[{func: sass, opts: {logger: true}}, {func: task, opts: null }]
111 js: [],
112 css: [],
113 imgs: [],
114 html: []
115 },
116 server: true, //是否开启server，默认集成gulp-connect，如果配置为'bird',则使用bird。
117 buildTarget: 'default' //buildTarget用于设置dist后的目录结构，如果选择default,则默认为css, js, html,如果是一个对象，则表示自定义，不过目前只支持按照文件类型进行分类。
118 },
119
120 destMod: { //生产模式，配置项和开发模式完全相同
121 output: './dist',
122 minify: true,
123 minifyHTML: true,
124 bundle: true,
125 concat: true,
126 less: true,
127 inline: false,
128 sourcemap: false,
129 watchFolder: null,
130 custom: {
131 js: [],
132 css: [],
133 imgs: [],
134 html: []
135 },
136 server: false,
137 buildTarget: {
138 js: './js/',
139 css: './css/',
140 imgs: './images/',
141 html: './html/'
142 },
143 },
144
145 rdMod: {
146 //rd环境配置项,内容同上
147 },
148
149 qaMod: {
150 //qa环境配置项,内容同上
151 },
152
153 birdConfig: { //bird 配置项
154 basePath: "./dev",
155 targetServer: {
156 port: "8276",
157 host: "your server host",
158            headers: {
159              cookie: ""
160 }
161        },
162 ajaxOnly: false
163 },
164
165 serverConfig: { //gulp connect 配置项
166 root: './dev'
167 }
168}
169
170```
171
172### DLL优化
173如果你使用webpack模块化开发模式，一些基础依赖库如果也每次构建，会大大拖慢构建的速度，因此我们引入了webpack的dll插件。
174
175##### step1
176修改webpack.dll.js文件中的vendors数组，将依赖放进数组
177
178```js
179const vendors = [];
180```
181
182##### step2
183执行
184
185```sh
186npm run dll
187```
188生成`manifest.json`文件和`src/lib/vendors.js`文件
189
190##### step3
191
192在html文件中引入`../lib/vendors.js`文件，放在其他js文件之前
193
194
195