前言
本文不是wbpack入门文章，如果对wbpack还不了解，请前往题叶的Wbpack入门，或者阮老师的Wbpack-Dmos。
为什么要使用Wbpack
与ract一类模块化开发的框架搭配着用比较好。
属于配置型的构建工具，比较用容易上手，行代码可大致实现gulp行才能实现的功能。
wbpack使用内存来对构建内容进行缓存，构建过程中会比较快。
第3点我想稍微论述一下，如果看过我之前写的《如何写一个wbpack插件(一)》，会发现，wbpack会将文件内容存在 简要回顾Wbpack的配置
Wbpack的配置主要为了这几大项目：
ntry：js入口源文件
output：生成文件
modul：进行字符串的处理
rsolv：文件路径的指向
plugins：插件，比loadr更强大，能使用更多wbpack的api
常用Loadrs介绍
处理样式，转成css，如：lss-loadr,sass-loadr
图片处理，如:url-loadr,fil-loadr。两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中
处理js，将s6或更高级的代码转成s5的代码。如：babl-loadr，babl-prst-s，babl-prst-ract
将js模块暴露到全局，如果xpos-loadr
常用Plugins介绍
代码热替换,HotModulRplacmntPlugin
生成html文件，HtmlWbpackPlugin
将css成生文件，而非内联，ExtractTxtPlugin
报错但不退出wbpack进程，NoErrorsPlugin
代码丑化，UglifyJSPlugin，开发过程中不建议打开
多个html共用一个js文件(chunk)，可用CommonsChunkPlugin
清理文件夹，Clan
调用模块的别名ProvidPlugin，例如想在js中用，如果通过wbpack加载，需要将与jQury对应起来
使用优化
了解了以上介绍的Loadrs和Plugins之后，基本就可以搭建一整套基于Wbpack的构建(不需要gulp与grunt，合图除外)。下面让我来介绍一下在使用过程中的一些优化点。
优化点一.如何区分开发及生产环境
在packag.json里面的script设置环境变量，注意mac与windows的设置方式不一样
scripts:{
publish-mac:xportNODE_ENV=prodwbpack-p--progrss--colors,
publish-win:stNODE_ENV=prodwbpack-p--progrss--colors
}
在wbpack.config.js使用procss.nv.NODE_ENV进行判断
优化点二.使用代码热替换
使用代码热替换在开发的时候无需刷新页面即可看到更新，而且，它将构建的内容放入内在中，能够获得更快的构建编译性能，因此是官方非常推荐的一种构建方式。
方法一：
1.将代码内联到入口js文件里
2.启动代码热替换的plugins
方法二：
直接实现一个srvr.js，启动服务器(需要启动热替换plugin)，下面是我在业务中用到的一个范例。具体的一些参数可以
varwbpack=rquir(wbpack);
varwbpackDvMiddlwar=rquir(wbpack-dv-middlwar);
varwbpackDvSrvr=rquir(wbpack-dv-srvr);
varconfig=rquir(./wbpack.config.js);
config.ntry.indx.unshift(wbpack-dv-srvr/clint? config.ntry.indx.unshift(wbpack/hot/only-dv-srvr);
var varsrvr=nwwbpackDvSrvr( hot:tru,
historyApiFallback:fals,
//noInfo:tru,
stats:{
colors:tru//用颜色标识
},
proxy:{
*: },
});
srvr.listn();
方法三：
直接在wbpack.config.js上配置。这个办法最简单，当然灵活性没有自己实现一个服务器好。
优化点三.importract导致文件变大，编译速度变慢，咋办?
如果你想将ract分离，不打包到一起，可以使用xtrnals。然后用script单独将ract引入
如果不介意将ract打包到一起，请在alias中直接指向ract的文件。可以提高wbpack搜索的速度。准备部署上线时记得将换成ract.min，能减少文件大小(减少约kb)
使用modul.noPars针对单独的ract.min.js这类没有依赖的模块，速度会更快。
优化点四.将模块暴露到全局
如果想将rport数据上报组件放到全局，有两种办法：
方法一：
在loadr里使xpos将rport暴露到全局，然后就可以直接使用rport进行上报
{
tst:path.join(config.path.src,/js/ loadr:xpos?rport
},
方法二：
如果想用R直接代表rport，除了要用xposloadr之外，还需要用ProvidPlugin帮助，指向rport，这样在代码中直接用R.tdw，R.monitor这样就可以
nwwbpack.ProvidPlugin({
R:rport,
}),
优化点五.合并公共代码
有些类库如utils,bootstrap之类的可能被多个页面共享，最好是可以合并成一个js，而非每个js单独去引用。这样能够节省一些空间。这时我们可以用到CommonsChunkPlugin，我们指定好生成文件的名字，以及想抽取哪些入口js文件的公共代码，wbpack就会自动帮我们合并好。
nwwbpack.optimiz.CommonsChunkPlugin({
nam: filnam:js/ chunks:[indx,dtail]
}),
优化点六.善用alias。
rsolv里面有一个alias的配置项目，能够让开发者指定一些模块的引用路径。对一些经常要被import或者rquir的库，如ract,我们最好可以直接指定它们的位置，这样wbpack可以省下不少搜索硬盘的时间。
优化点七.多个html怎么办
使用HtmlWbpackPlugin，有多少个html，就排列多少个，记得不要用injct，否则全部js都会注入到html。如果真的要用injct模式，请务必将不需要的js用xcludchunk去掉或者用chunk参数填上你需要入口文件。
仅使用app作为注入的文件：
plugins:[
nwHtmlWbpackPlugin({
chunks:[app]
})
]
不使用dv-hlpr作为注入文件：
plugins:[
nwHtmlWbpackPlugin({
xcludChunks:[dv-hlpr]
})
]
如果你不想用injct模式，但又想使用html-wbpack-plugin，那你需要在html里用script标签放入对应的js，以及用入对应的css。记住，这些资源的路径是在生成目录下的，写路径的时候请写生成目录下的相对路径。
优化点八.html-wbpack-plugin不用使injct模式没又md5，而且不支持文件内联怎么破?
当时我就给维护者提了一个issu–Addinlinfaturtothplugin。
然后维护者在开发的分支上加了这么一个特性(证明维护者不想在插件里加内联功能了，想让我来弄)：
事件
允许其它插件去使用执行事件
html-wbpack-plugin-bfor-html-procssing
html-wbpack-plugin-aftr-html-procssing
html-wbpack-plugin-aftr-mit
使用办法：
htmlPluginData.html+=Thmagicfootr;
callback();
});
不过我还是决定自己开发一个了一个插件
html-rs-wbpack-plugin，有中英文文档可以参考。其实html-wbpack-plugin以js作为入口可能跟wbpack的理念更为一致，但其实直接在html上放link和script更加方便直白一些。而且html-wbpack-plugin局限性太多，如果我想在script上加attribut也是比较麻烦的事儿。所以我干脆开发一个可以允许在html上直接放link和script而且支持内联及md5的插件。
但相信我之后也会针对html-wbpack-plugin再写一个内联及md5的插件，适配一直在用这个插件的人。
优化点九.用gulp-wbpack速度慢咋办
上图是初始化构建30个文件的用时，一共用了13秒。用了xtrnals优化后，还有多kb，比用纯wbpack优化要大50多kb。而且，由于你用的是gulp-wbpack，每次有文件改动，都必须全部重新编译一次。因此，跟ract搭配建议还是不要用gulp-wbpack。因为如果你使用wbpack的话，即使初次启动时速度也并不快，但开发过程中，wbpack会自动识别，只会重新编译有修改的文件，这大大加快了编译构建速度。
没办法，老项目改造，真的要用，乍办?我提供以下思路
(1)当非js文件改变的时候，不要去跑js打包的任务
(2)非公共的js发生改变的时候，只执行这个js的打包任务
下图是优化了之后，在开发过程中非公共文件修改后的编译速度。我的娘，纯wbpack只需要多ms。建议还是用wbpack吧。
优化点十.如果在通过wbpack在项目中使用bootstrap,jqury以及fontawsom
这一点对于创业公司来说可能比较有用，它们的初期产品都需要快速上线，用一些比较成熟的UI框架会比较好。
这样，首先我们需要jqury文件，并且安装bootstrap(3.3.5),font-awsom(4.4.0),以及imports-loadr(0.6.3)。还需要sass-loadr(3.1.2)及lss-loadr(2.5.3)。
然后，在主要入口文件要这么引用下面的样式文件：
rquir(bootstrap/lss/bootstrap.lss);
rquir(font-awsom/scss/font-awsom.scss);
rquir(./indx.scss);
在wbpack.config.js的ntry项目里，可以加上这个vndor:
1 在loadrs里加入以下loadr，将jQury暴露到全局:
{
tst:path.join(config.path.src,/libs/jq/jqury-2.1.4.min),
loadr:xpos?jQury
},
再添加以下loadr，让wbpack帮助复制font文件
{
tst:/\.(woff
woff2
ot
ttf
svg)(\?.*
)/,
loadr:url-loadr?importLoadrs=1limit=0nam=/fonts/[nam].[xt]
},
在plugins里添加ProvidPlugin，让指向jQury
nwwbpack.ProvidPlugin({
:jqury,
jQury:jqury
}),
这样，就可以同时使用jQury,Bootstrap和Fontawsom了。
wbpack会取代gulp吗
未必，但在开发环境，以及不需要一些功能如合图的情况下，wbpack可以完全取代gulp，至少现在我有三个项目完全用wbpack进行开发和部署上线
要取代gulp,还需要不断发展它的loadr以及plugin生态，至少，完善一下开发者文档啊。
作者：AlloyTam
链接：
(长按上图，可自动识别