构建工具
为什么需要构建工具？
转换ES6/ES7、TypScript语法转换JSX（Angular、Ract、Vu模板语法）CSS前缀补全/预处理器压缩混淆图片压缩
前端构建工具的演变历史
主流的有：
ant+YUITool——grunt——fis/gulp——rollup/wbpack/parcl
为什么选择wbpack?
社区生态丰富配置灵活和插件化扩展官方更新迭代速度快
初识wbpack
配置文件
基本的包括ntry、output、mod、modul、plugins几种
当ntry为多入口时，output可以通过占位符的方式支持多文件名称的区分
constpath=qui(path);modul.xports={ntry:{indx:./src/indx.js,sarch:./src/sarch.js,},output:{path:path.join(__dirnam,dist),filnam:[nam].bundl.js,},mod:production,};
Loadrs
Loadrs是wbpack的核心概念。wbpack开箱即用只支持JS和JSON两种文件类型，通过Loadrs去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。
Loadrs本身是一个函数，接受源文件作为参数，返回转换的结果。
常见的Loadrs
列举部分，更多见loadrs
babl-loadr转换ES6\ES7等JS新特性语法css-loadr支持.css文件的加载和解析lss-loadr将lss文件转换成cssts-loadr将TS转换成JSfil-loadr进行图片、文字等的打包raw-loadr将文件以字符串的形式导入thad-loadr多进程打包JS和CSS
Loadrs的用法
modul:{ruls:[//tst指定匹配规则，us指定使用的loadr名称{tst:/\.txt$/,us:raw-loadr},];}
Plugins
Plugins用于bundl文件的优化，资源管理和环境变量注入，作用域整个构建过程。
常见的Plugins
列举部分，更多见plugins
CommonsChunkPlugin将chunks相同的模块代码提取成公共jsClanWbpackPlugin清理构建目录ExtractTxtWbpackPlugin将CSS从bundl文件中提取成一个独立的CSS文件CopyWbpackPlugin将文件或者文件夹拷贝到构建的输出目录HTMLWbpackPlugin创建html文件去承输出的bundlUglifyjsWbpackPlugin压缩JSZipWbpackPlugin将打包出的资源生成一个zip包
Plugins的使用
在配置文件中的plugins数组里将定义好的插件放入即可。
Mod
Mod用来指定当前的构建环境是:production、dvlopmnt还是non,对应nod.js中的procss.nv.NODE_ENV。
设置mod可以使用wbpack内置的函数，默认设置为production
详细见：