一、webpack
webpack是一个模块打包器，webpack的主要是将javaScript文件打包在一起的，打包后的文件在浏览器中使用，但他能够胜任转换（transfrom）和打包（bundle）。 不仅可以上线打包，还可以搭建开发阶段的服务，检测打包的错误报告。
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。
webpack遵守的是conmmonJS规范。所以配置导出遵循conmmonJS规范的写法
1.配置
用到webpack 需要配置东西，这个文件应该在根目录之下，就叫做webpack.config.js
五大核心
入口 （entry）
就是选择对那些文件进行打包，来作为依赖图的开始
entry:"./src/main.js" //相对路径
后面跟string和array的时候是一个但入口文件，只会生成一个js打包文件。 但是如果是object的时候则是多入口，打包之后会生成多个js文件夹。
出口 （output）
就是选择打包到那个文件夹
output:{
//给打包的文件起名字
filename:'',
// 打包之后的路径,必须是绝对路径
path:''
}
加载器 （loaders）
因为webpack只能打包最基本就是js和json文件，这里需要处理到图片css等需要借助loaders解析。
打包css、sass、less，用起来很简单，就是先npm相应的loader，然后在里面配置起来就可以用，但是一定要在入口的文件中引入才是可以的。
// 加载器
module:{
rules:[
//loader的配置
//这里是配置打包css结尾的文件。
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
]
},
url-loader
{
test: /.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
这个就是用来转base64的，可以设置需要的的字节限制，多少字节数以下转为base64，以上的大图片就没必要了。
当配置图片打包的时候，会把较小的图片转为base64，然后base64之后的图片会比图片本身的稍微大一些，大的会大三分之一左右，所以我就在想，前端为什么说图片转base64会是优化呢，因为他导致css增大了，会造成阻塞，虽然省了一些http请求，后面看到下面链接的解释很全面，前端转base64不一定就是个优化： www.jianshu.com/p/f6fa7a674…
插件（ plugins)
增强webpack的打包功能
模式 (mode)
可以配置打包的环境
开发模式 development
生产模式 production
module.exports{
//入口
entry:"./src/main.js" //相对路径
// 输出
output:{
//文件的输出路径
// __dirname nodejs的变量，代表当前文件的文件夹目录
path:path.resolve(__dirname,'dest'), //绝对路径
//文件名
filename:"main.js"
},
// 加载器
module:{
rules:[
//loader的配置
]
},
// 插件
plugins:[
// plugins的配置
],
// 模式
mode:'devlopment',
}
二、gulp
移步老师博客，很全面很详细。
其实市面上有很多的打包构建工具
1.webpack现在用的最多，优点也比较明显，专注于处理模块化问题，能做到开箱即用，但是缺点就是打包的时候会添加自己的代码。
2.gulp的优点好用又灵活，但是不能开箱即用，配置相对复杂
3.fis3 是百度的打包工具，好用也能开箱即用，但是不在维护，不支持新版本的node。已经废弃
4.rollup 是在用于开发源码的时候或者框架的时候，不需要多余的代码，来构建模块化。
