webpack学习--Mr.Ember

一. 常见的loader

1. file-loader：把文件输入到一个文件中，通过相对URL引用输出的文件。

2. url-loader：与file-loader类似，在嗯见很小的情况下一base64的方式把文件内容注入到代码中。

3. source-map-loader：加载额外的source map文件，方便断点调试。

4. bable-loader：把ES6转化为ES5。

5. style-loader：把css代码注入到js中，通过DOM操作去加载css。

6. css-loader：加载css，支持模块化，压缩，文件导入等特性。

二. 常见的plugin

1. define-plugin：定义环境变量。

2. commons-chunk-plugin：提取公共代码。

3. uglifyjs-webpack-plugin：通过uglifyES压缩ES6代码。

三. webpack运行流程

1. 初始化参数：从配置文件和shell语句中读取与合并参数，得出最终的参数。

2. 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象run方法开始编译。

3. 确定入口：根据配置文件entry找出所有的入口文件。

4. 编译模块：从文件入口出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤知道所有的入口依赖的文件都经过本步骤的处理。

5. 完成模块编译：