webpack构建之loader与plugin的区别是什么

最新推荐文章于 2023-11-30 20:44:06 发布

leelxp

最新推荐文章于 2023-11-30 20:44:06 发布

阅读量2.5k

点赞数 4

分类专栏： webpack 文章标签： webpack loader plugin loader与plugin区别

lee前端技术站

本文链接：https://blog.csdn.net/leelxp/article/details/108099138

版权

webpack 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

在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