loader用于转换、将A文件进行编译形成B文件

plugin用于处理打包过程中的自定义操作的扩展器，不直接操作文件

Loader

webpack自身只支持对于js和json类型文件的处理，而其他非js文件则需要通过loader转换成 commonJS规范 的文件后，才能被webpack进行解析

例如： css-loader、sass-loader、style-loader

Plugin

webpack打包编译过程中，对某些事件进行自定义操作，比如资源管理、bundle文件优化等

例如： uglifg-webpack-plugin、clean-webpack-plugin、babel-polyfill

webpack打包原理

  1. 识别人口文件
  2. 通过逐层识别模块依赖（Commonjs、amd 或者 es6中的import ）
  3. webpack做的就是分析代码、转换代码、编译代码、输出代码
  4. 最终形成打包后的代码

CommonJS规范

每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等，对其他的模块都不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块。

其特点：

  1. 所有代码都运行在模块作用域，不会污染全局作用域。
  2. 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
  3. 模块加载的顺序，按照其在代码中出现的顺序。