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. 完成模块编译: