前言
Webpack的核心功能是通过抽离出很多插件来实现的,因此系统内功能的划分粒度很细,这样做到了完美解偶同时又分工明确,代码容易维护。所以说插件机制是也是Webpack的核心知识,那么下面我们就来写介绍一下Loader与Plugin,并写一些常用的Loader和Plugin。
Loader
对于Loader我们可以通过rules去匹配,哪些文件会被这个loader所处理。Loader本身就是一个函数,当webpack解析资源的时候,会调用相关的loader去处理,loader接收到文本内容作为参数,将处理完的内容进行返回出去。那么loader除了接收内容作为参数外,还有map代表sourcemap,以及meta代表别的loader传递的参数。
那么下面我们来开发一些Loader,去理解一下Loader的作用:
clean-log-loader
我们在开发过程中会写很多的console.log去进行调试,但是对于打包的内容,我们不需要进行log控制台输出,所以我们通常对打包的内容清除掉console.log,那么我们可以开发一个清除log的loader。如下:
module.exports = function (content) {
// 清除文件内容中console.log(xxx)
return content.replace(/console\.log\(.*\);?/g, "");
};
通过正则表达式将去匹配文件内容的console.log,将匹配的内容使用空字符串进行替换,实现打包后的内容清楚对应的console.log()
banner-loader
比如说我们想对我们所编译打包的文件,都添加上作者信息,这个时候也是匹配对应的内容去做出修改,代码如下:
module.exports = function (content) {
// 可以在Loader中预传递参数
const options = this.getOptions({
type: "object",
properties: {
author: {
type: "string"
}
},
additionalProperties: false
});
const prefix = `
/*
* Author: ${options.author}
*/
`;
return prefix + content;
};
那么我们看到,里面是有对应的options的,我们可以在外层options中进行传递对应的参数,通过对rules去设置规则匹配所有的js文件,调用对应的loader,传递参数author,如下图所示:
file-loader
这个是参照对应file-loader的源码所仿照的,首先我们需要定义为rawloader,因为图片和文件他们都是buffer数据,需要rawloader才可以去处理,实际是通过将内容去生成一个hash值作为文件名,然后通过emitFile将这个文件输出到对应的dist路径中,最后再通过mudule.exports这种commonJs将文件的路径去返回出去,当进行css解析引用这个图片时比如background-image:url(a.png),通过css-loader再将引用的文件变为require(hash值.png),代码如下:
const loaderUtils = require("loader-utils");
module.exports = function (content) {
// 1. 根据文件内容生成带hash值文件名
let interpolatedName = loaderUtils.interpolateName(this, "[hash].[ext][query]", {
content,
});
interpolatedName = `images/${interpolatedName}`
// console.log(interpolatedName);
// 2. 将文件输出出去
this.emitFile(interpolatedName, content);
// 3. 返回:module.exports = "文件路径(文件名)"
// 去替换文件
return `module.exports = "${interpolatedName}"`;
};
// 需要处理图片、字体等文件。它们都是buffer数据
// 需要使用raw loader才能处理
module.exports.raw = true;
Plugin
plugin是通过扩展webpack功能,加入自定义的构建行为,使得webpack可以执行更广泛的任务。webpack 在编译代码过程中,会触发一系列 Tapable 钩子事件,插件所做的,就是找到相应的钩子,往上面挂上自己的任务,也就是注册事件,这样,当 webpack 构建的时候,插件注册的事件就会随着钩子的触发而执行了。
对于Plugin构建对象中有compiler和compilation,他们有着一些区别。
Compiler
compiler 对象中保存着完整的 Webpack 环境配置,每次启动 webpack 构建时它都是一个独一无二,仅仅会创建一次的对象。
这个对象会在首次启动 Webpack 时创建,我们可以通过 compiler 对象上访问到 Webapck 的主环境配置,比如 loader 、 plugin 等等配置信息。它有着以下属性:
- compiler.options 可以访问本次启动 webpack 时候所有的配置文件,包括但不限于 loaders 、 entry 、 output 、 plugin 等等完整配置信息。
- compiler.inputFileSystem 和 compiler.outputFileSystem 可以进行文件操作,相当于 Nodejs 中 fs。
- compiler.hooks 可以注册 tapable 的不同种类 Hook,从而可以在 compiler 生命周期中植入不同的逻辑。
compiler hooks文档如下:compiler hooks
Compilation
compilation 对象代表一次资源的构建,compilation 实例能够访问所有的模块和它们的依赖。
一个 compilation 对象会对构建依赖图中所有模块,进行编译。 在编译阶段,模块会被加载(load)、封存(seal)、优化(optimize)、 分块(chunk)、哈希(hash)和重新创建(restore)。
主要属性如下:
- compilation.modules 可以访问所有模块,打包的每一个文件都是一个模块。
- compilation.chunks chunk 即是多个 modules 组成而来的一个代码块。入口文件引入的资源组成一个 chunk,通过代码分割的模块又是另外的 chunk。
- compilation.assets 可以访问本次打包生成所有文件的结果。
- compilation.hooks 可以注册 tapable 的不同种类 Hook,用于在compilation 编译模块阶段进行逻辑添加以及修改。
生命周期
通过生命周期,我们可以参照这个生命周期去在对应的时期,调用一些回调函数做一些操作,下面我们开发一些Plugin插件,再次之前,我们先普及几个compiler的钩子。
- make:compilation 结束之前执行。make 是 AsyncParallelHook, 也就是异步并行钩子, 特点就是异步任务同时执行。
- emit:输出 asset 到 output 目录之前执行。emit是AsyncSeriesHook,也就是异步串行钩子,特点就是异步任务顺序执行。
- compile:beforeCompile 之后立即调用,但在一个新的 compilation 创建之前。compile hook 是 SyncHook, 也就是同步钩子, 只能用tap注册。
带着这几个钩子,我们来开发一些插件:
相关插件
analyze-webpack-plugin
我们可以通过开发这个plugin,来去获取所有静态文件中的文件的大小,并将其输出到对应的文件中,代码如下:
class AnalyzeWebpackPlugin {
apply(compiler) {
compiler.hooks.emit.tap("AnalyzeWebpackPlugin", (compilation) => {
// 1. 遍历所有即将输出文件,得到其大小
/*
将对象变成一个二维数组:
对象:
{
key1: value1,
key2: value2
}
二维数组:
[
[key1, value1],
[key2, value2]
]
*/
const assets = Object.entries(compilation.assets);
/*
md中表格语法:
| 资源名称 | 资源大小 |
| --- | --- |
| xxx.js | 10kb |
*/
let content = `| 资源名称 | 资源大小 |
| --- | --- |`;
assets.forEach(([filename, file]) => {
content += `\n| ${filename} | ${Math.ceil(file.size() / 1024)}kb |`;
});
// 2. 生成一个md文件
compilation.assets["analyze.md"] = {
source() {
return content;
},
size() {
return content.length;
},
};
});
}
}
module.exports = AnalyzeWebpackPlugin;
我们首先通过compilation来获取assets对应输出的所有文件,通过Object.entries将文件这种key-value对象类型变为二维数组,然后我们通过遍历这个数组去计算文件大小拼接内容,最后将我们设置的文件输出到dist目录中。
banner-webpack-plugin
开发这个plugin的作用是给予打包输出的文件添加注释,我们需要在打包之前的钩子上,进行调用相对于的内容,可以通过compilation来获取assets这些资源文件。
class BannerWebpackPlugin {
constructor(options = {}) {
this.options = options;
}
apply(compiler) {
// 在资源输出之前触发
compiler.hooks.emit.tap("BannerWebpackPlugin", (compilation) => {
// debugger;
const extensions = ["css", "js"];
// 1. 获取即将输出的资源文件:compilation.assets
// 2. 过滤只保留js和css资源
const assets = Object.keys(compilation.assets).filter((assetPath) => {
// 将文件名切割 ['xxxx', 'js'] ['xxxx', 'css']
const splitted = assetPath.split(".");
// 获取最后一个文件扩展名
const extension = splitted[splitted.length - 1];
// 判断是否保护
return extensions.includes(extension);
});
const prefix = `/*
* Author: ${this.options.author}
*/
`;
// 3. 遍历剩下资源添加上注释
assets.forEach((asset) => {
// 获取原来内容
const source = compilation.assets[asset].source();
// 拼接上注释
const content = prefix + source;
// 修改资源
compilation.assets[asset] = {
// 最终资源输出时,调用source方法,source方法的返回值就是资源的具体内容
source() {
return content;
},
// 资源大小
size() {
return content.length;
},
};
});
});
}
}
module.exports = BannerWebpackPlugin;
可以看出我们筛选出即将输出的资源文件,将其过滤出js与css文件,然后去获取我们所传入的作者信息,将其与文件的内容拼接到一起,最后重定义对应资源对象,通过source方法返回出新的内容。