前端构建工具发展：Grunt，Gulp 和 Webpack
- Grunt：从0到1，没有解决模块依赖,面向文件操作效率比较低
- Gulp :做了改良， 基于Stream ，没能解决模块依赖
- Webpack： 划时代的解决了模块依赖的问题
- 只支持JS模块，其他类型的模块通过loader转成JS模块。（CSS转成JS插入到DOM中；图片base64转成字符串，或文件拷贝后导出URL；babel-core）
- 所有的loader看做管道，进口是 一个字符串，然后经过加工，输出另一个字符串，多个loader可以像水管一样串联起来，很像java中的stream流。
babel-loader
返回编译的代码和sourcemap源码
最终编译出的代码中是否显示是 webpack 自己的配置，在 webpack.config.js 中添加一行代码打开sourcemap功能：
devtool: 'eval-source-map'
style-loader 和 css-loader
- css-loader 的作用是处理css中的
@import和url这样的外部资源
1.1 processCss.js 中会调用 postcss 对 css 源码解析，遍历其中的 declaration 并抽离出 url 和 import 这两种依赖
1.2 loader.js 会调用 processCss，根据它已经分析出的 url 和 import 依赖关系，在对应的代码中替换成 require，并拼接成段最终的JS返回 - style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML
file-loader 和 url-loader
- file-loader 并不会对文件内容进行任何转换，只是复制一份文件内容，并根据配置为他生成一个唯一的文件名。
file-loader 的工作流程如下：
- 通过 loaderUtils.interpolateName 方法可以根据 options.name 以及文件内容生成一个唯一的文件名 url（一般配置都会带上hash，否则很可能由于文件重名而冲突）
- 通过 this.emitFile(url, content) 告诉 webpack 我需要创建一个文件，webpack会根据参数创建对应的文件，放在 public path 目录下。
- 返回 'module.exports = webpack_public_path + '+ JSON.stringify(url) + ‘;’ ，这样就会把原来的文件路径替换为编译后的路径
- url-loader 并不是复制文件，而是把文件做base64编码，直接嵌入到CSS/JS/HTML代码中。
- 获取 limit 参数
- 如果 文件大小在 limit 之类，则直接返回文件的 base64 编码后内容
- 如果超过了 limit ，则调用
file-loader
