loader与plugin的区别
loader的作用是将代码进行转换,比如less转成css,一个loader就是一个函数,接收的参数是上一个loader的返回值,loader进行一系列处理后 返回新的代码
plugin的作用是在webpack的编译流程中完成某些操作,比如当webpack编译启动时,控制台输出一句话表示webpack启动了,plugin是一个带有apply方法的对象,apply方法的参数是compiler,在apply中注册compiler对象的钩子函数,钩子函数在官网中有相应的描述。
loader
基本配置
module.exports = { mode: "development", module: { rules: [ { test: /\.css$/, // 先执行 css-loader 再执行 style-loader use: ["style-loader","css-loader"], } ], }, };
loaders处理流程
判断当前文件名是否满足module.rules.test的规则
满足规则,则根据loaders数组从最后一个loader依次执行到最前的一个loader;不满足规则,loaders数组为空,没有可执行的loader
最后返回loaders处理结果
loader的写法
css-loader:
module.exports = function (sourceCode) { var code = `var style = document.createElement("style"); style.innerHTML = \`${sourceCode}\`; document.head.appendChild(style); module.exports = \`${sourceCode}\``; return code; }
plugin
loader的功能定位是转换代码,而一些其他的操作难以使用loader完成,比如:
- 当webpack生成文件时,顺便多生成一个说明描述文件
- 当webpack编译启动时,控制台输出一句话表示webpack启动了
- 当xxxx时,xxxx
当我们需要把功能嵌入到webpack的编译流程中的时候,要借助于plugin
基本配置
module.exports = { plugins:[ new MyPlugin() ] }
plugin是一个带有apply方法的对象
var plugin = { apply: function(compiler){ } }
也可以使用class的写法
class MyPlugin{ apply(compiler){ } } var plugin = new MyPlugin();
apply
apply方法会在初始化阶段,创建好Compiler对象后运行。
compiler对象是在初始化阶段构建的,整个webpack打包期间只有一个compiler对象,后续完成打包工作的是compiler对象内部创建的compilation
apply方法在一次打包过程中只执行一次,该方法接收一个compiler对象
compiler对象提供了大量的钩子函数(hooks,可以理解为事件),plugin的开发者可以注册这些钩子函数,参与webpack编译和生成。
你可以在apply方法中使用下面的代码注册钩子函数:
class MyPlugin{ apply(compiler){ compiler.hooks.事件名称.事件类型(name, function(compilation){ //事件处理函数 }) } }
事件名称
即要监听的事件名,即钩子名,所有的钩子:https://www.webpackjs.com/api/compiler-hooks
事件类型
这一部分使用的是 Tapable API,这个小型的库是一个专门用于钩子函数监听的库。
它提供了一些事件类型:
- tap:注册一个同步的钩子函数,函数运行完毕则表示事件处理结束
- tapAsync:注册一个基于回调的异步的钩子函数,函数通过调用一个回调表示事件处理结束
- tapPromise:注册一个基于Promise的异步的钩子函数,函数通过返回的Promise进入已决状态表示事件处理结束
处理函数
处理函数有一个事件参数compilation