提到 webpack,自然离不开 loader 与 blugin。Webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果(loader)。这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。而插件(plugin)就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。
简而言之,loader可以理解成webpack的横向广度,有了loader,webpack才可以打包处理各种的扩展语言。而plugin可以理解为webpack的纵向深度,在生命周期内注入不同的插件来扩展更多的能力。
Loader 就像是一个翻译官,每个 loader 可以把源资源转换成新的结果输出并传递给下一个 loader ,但是最后一个 Loader 必须返回 JavaScript (浏览器只能运行js代码,不支持其他扩展语言)。
以处理less文件为例:
module:{
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
至于 loader 的解析顺序为什么是从右向左的,原因其实只是Webpack选择了compose函数式变成方式,而不是pipe的方式而已。
有一天我们想把项目 txt 文件中的蒋梨花全部替换为梨花酱,这个时候就可以通过loader来解决
// webpack.config.js
module:{
rules: [
{
test: /\.txt$/,
use: ['demo-loader'],
options: {
name: '梨花酱' // 将要变更的通过配置项传入
}
}
]
}
// test.txt
你好,我是蒋梨花
// app.js (入口文件引用)
const text = require(./text.txt)
console.log(test)
// demo-loader.js
const loaderUtils = require('loader-utils')
// 接收options配置
module.exports = function(source) {
const options = loaderUtils.getOptions(this)
source = source.replace(/蒋梨花/g, options.name)
return `module.exports = ${JSON.stringify(sorce)}`
// 最终需要返回一段可执行的js脚本
}
Tips: 在实现一个 loader 的时候,要牢记几个原则哦:单一职责;链式组合;模块化;无状态
plugin是运行在webpak打包过程中的某段逻辑,它主要的作用是根据webpack提供的一些hooks来进行一些额外的操作,使 webpack 更加灵活扩展。
plugins: [
new HtmlWebpackPlugin()
]
我们通过 new 来使用这个插件,可以看出插件的本质是一个构造函数。
首先了解两个概念:Compiler 和Compilation
compiler 对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立,并配置好所有可操作的设置,包括 options,loader 和 plugin。当在 webpack 环境中应用一个插件时,插件将收到此 compiler 对象的引用。可以使用它来访问 webpack 的主环境。
compilation 对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时,每当检测到一个文件变化,就会创建一个新的 compilation,从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调,以供插件做自定义处理时选择使用。
在 webpack 启动后,它会执行 new xxxPlugin(options) 来初始化插件实例。在初始化对象后,会去调用 xxxPlugin.apply(compiler) 并传入 compiler 对象。插件获得 compiler 对象后,可以通过
compiler.plugin('事件名', 回调函数) 的方式进行监听 webpack 广播出来的事件了。
让我们来实现一个在文件中添加一段文字的功能插件:
1) 在配置文件中,使用插件
// webpack.config.js
plugins: [
new MyTestPlugin({
msg: '你好我是小白龙' // 传入的插件配置
})
]
2)编写 plugin 插件
// MyTestPlugin.js
const { ConcatSource } = require("webpack-sources") // 用来写入
class MyBannerPlugin {
constructor(options) {
// 获取传入的option信息
this.msg = options.msg
}, // 我们需要一个apply方法(为了获取compiler),接收compiler作为参数表示这次打包的上下文。
apply (compiler) {
const msg = this. msg // 指定挂载的 webpack 钩子函数
// 使用compiler钩子compilation,即编译(compilation)创建之后,执行插件。
compiler.hooks.compilation.tap("MyTestPlugin", compilation => {
// compilation的 optimizeChunkAssets 钩子,可以利用这个钩子实现为每个文件插入信息
compilation.hooks.optimizeChunkAssets.tap("MyTestPlugin", chunks => {
for (const chunk of chunks) {
for (const file of chunk.files) {
compilation.updateAsset(file, old => {
return new ConcatSource(msg,"\n", old);
});
}
}
})
})
}
}
module.exports = MyTestPlugin
可以看出,要实现一个plugin需要以下几步:
生成中...
感谢您的支持与鼓励
您的支持是我们前进的动力