概念
webpack是模块打包工具，能够管理项目中的模块依赖，并且编译输出模块中所需要的静态资源文件。能够很好的管理，打包项目中的html，css，js和静态资源文件，优化开发。对于不同类型的依赖，有对应的模块加载器，并且根据项目中的依赖关系，最后合并生成优化的静态资源。
原理
将所有依赖打包成成一个bundle.js文件，通过代码分割成单元片段按需加载。
基础概念
entry
告诉webpack要使用哪些模块，作为内部依赖图的开始
output
告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist
loader
处理非js文件，把文件转为成webpack能处理的模块
plugin
扩展webpack的能力，优化打包能力，资源管理和注入环境变量
chunk
webpack在进行模块的依赖分析的时候，代码分割出来的代码块
module
是开发中的单个模块
与Grunt和Gulp的区别
- Grunt和Gulp需要开发人员将前端构建拆分为一个个task，并且合理的控制这些taks的调用关系。但是webpack只需要找到入口文件，并且清除不同资源要用什么类型的loader做何种解析和加工。
- gulp更像后端开发者的思路，需要对于整个流程了如指掌 webpack更倾向于前端开发者的思路
常见的loader
- baber-loader：将ES6转化为ES5
- css-loader和style-loader:将CSS转为webpack能处理的模块
- image-loader:压缩和打包图片文件
常用的plugin
- define-plugin：定义环境变量
- commons-chunk-plugin：提取公共代码
- uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码
打包过程
- 初始化：启动构建，读取和合并参数，加载plugin，实例化complier
- 编译：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
- 输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统
webpack优化
- CDN加速优化
- 压缩代码。删除多余的代码，注释。利用plugin插件来压缩js文件，利用cssnano来压缩css文件
- 提取公共代码
配置多页应用
用webpack的Autowebplugin来完成简单自动化的构建，但是前提是项目的目录结构必须遵守预设的规范。
- 页面都有公共的代码，抽离公共代码避免重复加载
