项目地址：https://github.com/xieshuangting/webpack-test
笔记具体内容见有道云：http://note.youdao.com/noteshare?id=76f51803cf398ef5b6d627d2b3813222
webpack的作用：
1.（babel-loader）转化语法，将es6以上的语法转化成es5.例如es module。
2.利用loader补全css样式厂商前缀（autoprefixer）。
3.（css-loader，style-loader）压缩合并css，js。
4.（url-loader）将图片转化成base64
webpack默认配置文件是webpack.config.js
loader：
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
例如：url-loader将图片转换成一个base64位的字符串
plugins：
使用 plugins 让打包更便捷
例如：html-webpack-plugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中
Source-map
一个映射关系，他知道dist目录下js文件中的错误代码对应的是src目录下相应文件的错误代码的位置
Hot Module Replacement
热模块更新。运行代码打开浏览器，改变代码更新页面
tree-shaking
虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。
Develoment 和 Production 模式的区分
打包dev：webpack-dev-server，pro：webpack
Code Splitting代码分割：
手动：将引进的工具库分开打包（将工具库挂载到window方法下。然后entry分开打包）
自动：同步，配置splitChunks
异步，不需配置，直接打包
Lazy Loading 懒加载：
异步加载工具库来实现懒加载
在控制台中按下Ctrl+shift+p可以调出输入面板。输入coverage调出面板，点击圆圈之后可以看到main.js一开始加载的时候的利用率。
异步加载时设置 webpackPrefetch:true 分开打包并且用到时才加载
CSS 文件的代码分割：
若是不做css代码的分割的话webpack会将css代码放在main.js文件里面。extract-text-webpack-plugin。optimize-css-assets-webpack-plugin进行css代码的压缩和合并