webpack介绍

前端构建工具发展：Grunt，Gulp 和 Webpack

• Grunt：从0到1，没有解决模块依赖,面向文件操作效率比较低
• Gulp :做了改良， 基于Stream ，没能解决模块依赖
• Webpack： 划时代的解决了模块依赖的问题

1. 只支持JS模块，其他类型的模块通过loader转成JS模块。（CSS转成JS插入到DOM中；图片base64转成字符串，或文件拷贝后导出URL；babel-core）
2. 所有的loader看做管道，进口是 一个字符串，然后经过加工，输出另一个字符串，多个loader可以像水管一样串联起来，很像java中的stream流。

babel-loader

返回编译的代码和sourcemap源码

最终编译出的代码中是否显示是 webpack 自己的配置，在 webpack.config.js 中添加一行代码打开sourcemap功能：devtool: 'eval-source-map'

style-loader 和 css-loader

1. css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
   1.1 processCss.js 中会调用 postcss 对 css 源码解析，遍历其中的 declaration 并抽离出 url 和 import 这两种依赖
   1.2 loader.js 会调用 processCss，根据它已经分析出的 url 和 import 依赖关系，在对应的代码中替换成 require，并拼接成段最终的JS返回
2. style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML

file-loader 和 url-loader

• file-loader 并不会对文件内容进行任何转换，只是复制一份文件内容，并根据配置为他生成一个唯一的文件名。

file-loader 的工作流程如下：

1. 通过 loaderUtils.interpolateName 方法可以根据 options.name 以及文件内容生成一个唯一的文件名 url（一般配置都会带上hash，否则很可能由于文件重名而冲突）
2. 通过 this.emitFile(url, content) 告诉 webpack 我需要创建一个文件，webpack会根据参数创建对应的文件，放在 public path 目录下。
3. 返回 'module.exports = webpack_public_path + '+ JSON.stringify(url) + ‘;’ ，这样就会把原来的文件路径替换为编译后的路径

• url-loader 并不是复制文件，而是把文件做base64编码，直接嵌入到CSS/JS/HTML代码中。

1. 获取 limit 参数
2. 如果 文件大小在 limit 之类，则直接返回文件的 base64 编码后内容
3. 如果超过了 limit ，则调用 file-loader

bundle.js 内容分析