Webpack中Loader和Plugin的主要区别是什么？

本文共计653个文字，预计阅读时间需要3分钟。

Loader 用于转换模块源码，描述了webpack如何处理非JavaScript模块，并在构建过程中引入这些依赖。Loader 可以将文件从一种语言转换为JavaScript，例如将TypeScript转换为JavaScript，或将图片转换为Base64编码。

Loader

用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，Style-Loader等。

loader的使用很简单：

在webpack.config.js中指定loader。module.rules可以指定多个loader，对项目中的各个loader有个全局概览。

loader是运行在NodeJS中，可以用options对象进行配置。plugin可以为loader带来更多特性。loader可以进行压缩，打包，语言翻译等等。

loader从模板路径解析，npm install node_modules。也可以自定义loader，命名XXX-loader。

语言类的处理器loader：CoffeeScript，TypeScript，ESNext（Bable）,Sass,Less,Stylus。任何开发技术栈都可以使用webpack。