Loader，直译为"加载器"。主要是用来解析和检测对应资源，负责源文件从输入到输出的转换，它专注于实现资源模块加载。在Webpack中它将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。从而将一些浏览器不支持或者有兼容问题的代码处理为浏览器可以支持的资源，如将ES6+转为ES5、Sass转为css、TypeScript转换为JavaScript，或者将内联图像转换为data URL。Loader可以扩展webpack加载资源的类型，主要分三类编译型 、资源型、 和 lint型。
此外Loader必须是方法，每个Loader都导出一个函数，这个函数接受资源，然后对资源处理返回。它接收一个source 返回一个 js表达式，如果不是js表达式则需要其他可以承接其内容。Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）。Loader像一个"翻译官"把读到的源文件内容转义成新的文件内容，并且每个Loader通过链式操作，将源文件一步步翻译成想要的样子。
编写Loader时要遵循单一原则，每个Loader只做一种"转义"工作。 每个Loader的拿到的是源文件内容（source），可以通过返回值的方式将处理后的内容输出，也可以调用this.callback()方法，将内容返回给webpack。 还可以通过 this.async()生成一个callback函数，再用这个callback将处理后的内容输出出去。 此外webpack还为开发者准备了开发loader的工具函数集——loader-utils。
- 开发思路
- 通过module.exports导出一个函数
- 该函数默认参数一个参数source(即要处理的资源文件)
- 在函数体中处理资源(loader里配置响应的loader后)
- 通过return返回最终打包后的结果(这里返回的结果需为字符串形式)
Plugin，直译为"插件"。主要是通过webpack内部的钩子机制，在webpack构建的不同阶段执行一些额外的工作，它的插件是一个函数或者是一个包含apply方法的对象，接受一个compile对象，通过webpack的钩子来处理资源。比如拷贝静态资源、清空打包后的文件夹等操作。Plugin是在plugins中单独配置。类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。 webpack在运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
- 开发思路
- 通过钩子机制实现
- 插件必须是一个函数或包含apply方法的对象
- 在方法体内通过webpack提供的API获取资源做响应处理
- 将处理完的资源通过webpack提供的方法返回该资源