之前面试，面试官问到一个问题，就是Webpack有loader了，为什么要还有弄一个plugins？插件不能也放在loader里面实现吗？
回来查了下，现在总结一下

loader

查看原文

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！【即把css转译成js能编译的内容】

• Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件打包的话，就会用到Loader，Loader的作用是让webpack拥有加载和解析非js文件的能力。

插件(plugins)

查看原文

• Plugin可以拓展Webpack的功能，让webpack具有更多的灵活性，在webpack运行的生命周期中会广播出许多监听事件，这些监听事件在合适的时机通过Webapck提供的API改变输出结果。

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！

插件目的在于解决 loader 无法实现的其他事。

剖析

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

总结区别

1 .文档定义loader为在模块加载时的预处理文件【加载和解析非js文件】，故loader运行在打包文件之前。
2 . plugins的定义为处理loader无法处理的事物，例如loader只能在打包之前运行，但是plugins在整个编译周期都起作用。