webpack中loader和plugin的区别

在webpack中，loader和plugin是俩个关键的部分，常常被面试官拿来比较他们，那么他们到底有什么区别呢？

loader
loader是文件加载器，能够加载资源文件，并对这些文件进行统一处理，诸如编译、压缩等，最终一起打包到指定的文件中。处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序正好相反，也就是说最后一个loader最先执行，第一个loader最后执行。第一个执行的loader的返回值接收源文件内容作为参数，其他loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript的源码。

编写自己的loader的时候需要引用官方提供的loader-utils，调用loaderUtils.getOptions(this)来拿到webpack的配置参数，然后进行自己的处理。loader本身只是一个函数。接收模块代码的内容然后发返回代码内容转化后的结果。并且一个文件还可以链式的经过多个loader的转化，比如：less-loader–>css-loader–>style-loader.一个loader的职责是单一的。只需要完成一种转化，如果一个源文件需要多步转化才能正常使用，就通过多个loader转化，在调用多个loader去转化一个文件的时候，每个loader会链式的去顺序执行。每一个loader将会拿到需要处理的原内容。上一个laoder处理的结果将会传给下一个loader接着处理，最后的loader将处理的最终结果返回给webpack。

简单的loader例子：

module.exports = function(source) {
// do something
return source
}

常用的loader有哪些？ 
file-loader: 文件加载；

url-loader:文件加载，在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL；

image-loader:加载并压缩图片

json-loader:处理json，webpack已经默认包含

babel-loader:ES6+ 转化成ES5

ts-loader:将ts转化成js

postcss-loader:扩展css语法。使用postcss各种插件autoprefixer,cssnext,cssnano

eslint-loader:检查代码

vue-loader:加载vue单文件组件

i18n-loader:国际化

cache-loader:性能开销大的loader前添加，将结果缓存到磁盘

expose-loader:暴露对象为全局对象

import-loader,exports-loader等可以向模块诸如变量或者提供导出模块功能

plugin
plugin的功能更加强大，loader不能做的，plugin都能做。plugin的功能要更加丰富，从打包 优化和压缩，到从新定义环境变量。功能强大到可以用来处理各种各样的任务。

plugin让webpack的机制更加灵活，他的编译过程中留下的一系列生命周期钩子，通过调用这些钩子来实现在不同编译结果时对源模块进行处理。他的编译是基于事件流来编译的，主要通过taptable来实现插件的绑定和执行的，taptable主要就是基于发布订阅的插件架构，是用来创建生命周期钩子的库，通过调用complier.hooks.run.tap开始注册创建complilation,基于创建chunks，通过parser解析chunks，使用模块和依赖管理模块之间的依赖关系。最后使用template基于compilation数据生成结果代码。

plugin的实现可以是一个类，使用的时候传入相关配置来创建一个实例，然后放到配置的plugins字段中，而plugin实例中最重要的方法就是apply，该方法在webpack complier安装插件的时候会被调用一次。apply接收webpack complier对象实例的引用。你可以在complier对象实例上注册各种事件钩子函数。来影响webpack的所有构建流程。以便于完成更多的其他构建任务。

简单的plugin例子：

class BasicPlugin {
constructor (options) {}
apply(complier) {
complier.plugin(‘compilation’, function(compilation) {
// do something
})
}
}

module.exports = BasicPlugin
常用的plugin有哪些？
ignore-plugin:忽略文件

uglifyjs-webpack-plugin:不支持es6压缩

terser-webpack-plugin:支持es6压缩

webpack-parallel-uglify-plugin:多进程执行代码压缩，提升构建速度

serviceworker-webpack-plugin:为网页应用增加离线缓存功能

commonsChunkPlugin:提高打包效率，将第三方库和业务代码分开打包

html-webpack-plugin:可以根据模版自动生成html代码，并自动引用css和js文件

HotModuleRelpacementPlugin:热更新

这就是loader和plugin的区别。。。
————————————————
版权声明：本文为CSDN博主「leelxp」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/leelxp/article/details/108099138