webpack5 自定义plugin和loader
前言
本文主要介绍如何自定义 webpack5的 loader 和 plugin 的过程；
环境
node: v14.17.1 "webpack": "^5.75.0", "webpack-cli": "^4.10.0" 复制代码
准备
mkdir loader-source cd loader-source npm init -y npm i webpack webpack-cli html-webpack-plugin -D 复制代码
打包命令：npx webpack
// webpack.config.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), filename: 'js/[name].js', clean: true, }, module: { rules: [] }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'public/index.html') }) ], mode: 'development' } 复制代码自定义loader
loader介绍
因为
webpack只能处理 js,json 类型的数据;loader帮助 webpack 将不同类型的文件转换为 webpack 可以识别的模块;
loader执行顺序
loader的默认执行顺序：从下到上，从右到左，(除非你定义了loader执行的优先顺序：enforce)
没有定义enforce就是normal. enforce改变loader的执行顺序：pre > normal > inline > post
pre: 前置 loader, normal:普通loader,inline:内联loader,post：后置loader,
module: { rules: [ { enforce: "pre", test: /\.js$/, loader: "loader1" }, { enforce: "pre", test: /\.js$/, loader: "loader2" }, { enforce: "post", test: /\.js$/, loader: "loader3" }, ] } 复制代码inline loader:
使用 style-loader和css-loader,处理 ./styles.css资源
import Styles from "style-loader!css-loader?modules!./styles.css"; // 多个loader使用 ! 连接隔开 // css-loader?modules, 就是给 css-loader 传递 modules 参数 复制代码
inline loader可以通过添加不同的前缀，跳过其他类型 loader
!跳过 normal loaderimport Styles from "!style-loader!css-loader?modules!./styles.css"; 复制代码
-!跳过 pre 和 normal loaderimport Styles from "-!style-loader!css-loader?modules!./styles.css"; 复制代码
!!跳过 pre, normal 和 post loaderimport Styles from "!!style-loader!css-loader?modules!./styles.css"; 复制代码
简单的自定义loader,了解下自定义loader的配置过程
工程
根目录下创建 loaders文件夹下test-loader.js;// 自定义loader // 接收内容，返回 /** * @param content 文件内容 * @param map SourceMap 相关的 * @param meta 别的loader传递的数据。 */ module.exports = function (content, map, meta) { console.log(content) return content } 复制代码在
webpack.config.js配置使用 自定义loader;
loader 就是一个函数，当 webpack 解析资源时，会调用相应的loader去处理，loader 就会接收到文件内容作为参数，返回内容出去。当然我们可以对接收的内容进行修改。
loader分类：
同步 loader；异步 loader；raw loader；pitch loader
同步 loader
同步loader 写法一：
module.exports = function(content) { return content } 复制代码同步loader 写法二：
如果存在 sourcemap 或者 其他loader的数据需要传递下去的，使用这种;
module.exports = function (content, map, meta) { console.log('test1') // 第一个参数，error, 是否有错误，没错null, 有错就把错误传递出去，如果loader出错了。会把错误传递出去 // 第二个参数：content,处理后的内容。 // 第三个参数：map source-map， 继续传递 source-map // 第四个参数： meta, 给其他别的loader传递的数据，可以继承传递出去 this.callback(null, content, map, meta) } 复制代码同步loader注意：同步loader中不能进行异步操作，会报错。下一个loader拿到的值是 undefined。
异步 loader
异步loader, 一定会等待这个异步loader做完，才会执行下一个laoder。
// 异步loader module.exports = function(content, map, meta) { const callback = this.async() console.log('test2',content) setTimeout(() => { console.log('test2') callback(null, content, map, meta) }, 1000) } 复制代码raw loader
raw loader 接收到的 content 是 buffer (二进制数据);当我们处理图片，字体图标的时候会使用定义这种loader;
raw loader 写法一：
// raw loader // raw loader接收到的 content 是 buffer数据（二进制数据） module.exports = function (content) { console.log('raw loader接收到的数据:', content) // 接收的数据是 buffer数据 return content } module.exports.raw = true; 复制代码raw loader 写法二：
// 根据情况，用同步异步loader用法都行 // 关键是 raw = true function test3Loader(content) { return content } test3Loader.raw = true module.exports = test3Loader 复制代码
pitch loader
pitch loader 要求在暴露的对象中添加 pitch方法，pitch方法是在执行loader之前执行
// pitch loader module.exports = function(content) { console.log('test4 normal loader') return content } // 要求添加 pitch，会在 loader执行之前执行 module.exports.pitch = function() { console.log('test4 pitch') } 复制代码pitch loader执行顺序 和 return
1. 先由 前往后执行 pitch 方法，再 由后往前执行 loader 方法。
2. 一旦在pitch中return了，后面的 pitch 和 loader 不再执行。 也叫 熔断机制。
loader API
| 方法名 | 含义 | 用法 |
|---|---|---|
| this.async | 异步回调 loader,返回 this.callback | const callback = this.async() |
| this.callback | 可以同步或者异步调用并返回多个结果的函数 | this.callback(err, content, sourceMap?, meta?) |
| this.getOptions(schema) | 获取 loader 的 options | this.getOptions(schema) |
| this.emitFile | 产生一个文件 | this.emitFile(name,content,sourceMap) |
| this.utils.contextify | 返回一个相对路径 | this.utils.contextify(context, request) |
| this.utils.absolutify | 返回一个绝对路径 | this.utils.absolutify(context, request) |
自定义 clean-log-loader
作用：用来
清理 js 代码中的console.log
未清除 console.log 会被编译打包进去.
// clean-log-loader module.exports = function(content) { // 清除 内容中的console.log语句 "console.log(xxx)" return content.replace(/console\.log\(.*\);?/g, ''); } 复制代码use clean-log-loader 后，console.log 被替换为 ''
自定义 banner-loader
添加 作者 等信息;
// webpack.config.js module: { rules: [ { test: /\.js$/, loader: './loaders/banner-loader', options: { author: "老王", // schema 设置了 type, 类型和设置不一致，也会报错。 // age: 18 // schema 设置了 additionalProperties为false,就不能新增额外属性，否则会报错 } } ] } 复制代码 // banner-loader.js const schema = require('./schema.json') module.exports = function (content) { // schema 对 options 的验证规则 // schema 符合 JSON Schema 的规则 const options = this.getOptions(schema) const prefix = ` /** * Author: ${options.author} */ ` return prefix + content; } 复制代码 // schema.json { "type": "object", "properties": { "author": { "type": "string" } }, "additionalProperties": false } 复制代码自定义 babel-loader
没有加 babel-loader 使用 ES6 语法无法编译成 ES5,在IE低版本上可能无法识别使用:
npm i @babel/core @babel/preset-env -D 复制代码
// schema.json { "type": "object", "properties": { "presets": { "type": "array" } }, "additionalProperties": true } 复制代码 // babel-loader.js // [babel中文](https://www.babeljs.cn/docs/babel-core) const babel = require('@babel/core') const schema = require('./schema.json') module.exports = function (content) { // 异步loader const callback = this.async() const options = this.getOptions(schema) // 使用 babel 对代码进行编译转换 babel.transform(content, options, function(err, result) { if (err) callback(err) else callback(null, result.code) }) } 复制代码 // webpack.config.js { test: /\.js$/, loader: './loaders/babel-loader', options: { presets: ['@babel/preset-env'], } }, 复制代码自定义plugin
plugin介绍
通过插件我们可以扩展 webpack,加入自定义的构建行为，以便 webpack 可以执行更广泛的任务，拥有更强的构建能力。插件 是 webpack 的 支柱 功能。Webpack 自身也是构建于你在 webpack 配置中用到的 相同的插件系统 之上！插件目的在于解决 loader 无法实现的其他事。
plugin工作原理
webpack就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。插件就像一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。webpack通过 Tapable 来组织这条复杂的生产线。webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。webpack的事件流机制保证了插件的有序性，使得整个系统扩展很好。 ----- [深入浅出 Webpack]
站在代码逻辑的角度就是：webpack在编译代码过程中，会触发一系列 Tapable 钩子时间，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。
webpack 内部的钩子
什么是钩子?
钩子的本质就是：
事件。为了方便我们直接接入和控制编译过程，webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称作：hooks(钩子)。开发插件，离不开这些钩子。
Tapable
Tapable 为了 webpack 提供了统一的插件接口(钩子)类型定义，它是webpack的核心功能库。webpack中目前有十种 hooks, 在 Tapable 源码中 webpack hook 可以看到，他们是：
Tapable 还统一暴露了三个方法给插件，用于注入不同类型的自定义构建行为：
tap: 可以注册同步钩子和异步钩子。tapAsync: 回调方式注册异步钩子。tapPromise: Promise 方式注册异步钩子。
plugin 构建对象
Compiler
Compiler 对象中保存着完整的 webpack 环境配置，每次启动 webpack 构建时它都是一个独一无二，仅仅会创建一次对象。
这个对象会在首次启动 webpack 时创建，我们可以通过 compiler 对象上访问到访问到 webpack 的主环境配置，比如 loader、plugin 等等配置信息。
它有以下主要属性：
compiler.options可以访问本次启动 webpack 时候所有的配置文件，包括但不限于loaders、entry、output、plugin等等完整配置信息。compiler.inputFileSystem和compiler.outputFileSystem可以进行文件操作，相当于 NodeJs 中的 fs。compiler.hooks可以注册 tapable 的不同种类 Hook, 从而可以在 compiler 生命周期中植入不同的逻辑。
compiler hook 文档
创建插件的时候，往这里注册，钩子顺序，大概是从上到下的。
Compilation
compilation 对象代表一次资源的构建，compilation 实例能够访问所有的模块和它们的依赖。
一个compilation 对象会对构建依赖图中所有的模块，进行编译。在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、分块(chunk)、哈希(hash) 和 重新创建(restore)。
它有以下主要属性:
compilation.modules可以访问所有模块，打包的每一个文件都是一个模块。compilation.chunkschunk即多个 modules 组成而来的一个代码块。入口文件引入的资源组成一个chunk,通过代码分割的模块又是另外的chunk。compilation.assets可以访问本次打包生成所有文件的结果。compilation.hooks可以注册 tapable 的不同种类 hook,用于 compilation编译模块阶段进行逻辑添加以及修改。
compilation hooks 文档
生命周期简图
自定义插件基本写法
/** * 1. webpack 加载 webpack.config.js 中所有的配置，此时会 new TestPlugin()，执行插件的 constructor. * 2. webpack创建compiler对象。 * 3. 遍历所有 plugins 中插件， 调用插件的 apply方法。 * 4. 执行剩下编译流程(触发各个hooks事件。) */ class TestPlugin { constructor() { console.log('TestPlugin constructor') } apply(compiler) { console.log('TestPlugin apply') } } module.exports = TestPlugin 复制代码插件的用法是: 先引入再使用
如何注册 hooks
/** * 1. webpack 加载 webpack.config.js 中所有的配置，此时会 new TestPlugin()，执行插件的 constructor. * 2. webpack创建compiler对象。 * 3. 遍历所有 plugins 中插件， 调用插件的 apply方法。 * 4. 执行剩下编译流程(触发各个hooks事件。) */ class TestPlugin { constructor() { console.log('TestPlugin constructor') } apply(compiler) { console.log('TestPlugin apply') // 由文档可知，environment是同步钩子，所以需要使用tap注册 compiler.hooks.environment.tap('TestPlugin', () => { console.log('TestPlugin environment') }) // 由文档可知，emit是异步串行钩子 compiler.hooks.emit.tap('TestPlugin', (compilation) => { console.log('TestPlugin emit 111') }) compiler.hooks.emit.tapAsync('TestPlugin', (compilation, callback) => { setTimeout(() => { console.log('TestPlugin emit 222') callback() }, 2000) }) compiler.hooks.emit.tapPromise('TestPlugin', (compilation) => { return new Promise((resolve) => { setTimeout(() => { console.log('TestPlugin emit 333') resolve() }, 5000) }) }) // 由文档可知，make是异步并行钩子，AsyncParallelHook compiler.hooks.make.tapAsync("TestPlugin", (compilation, callback) => { // 在 compilation 上挂载钩子 // 需要在 compilation hooks 触发前注册才能使用 compilation.hooks.seal.tap('TestPlugin', () => { console.log('TestPlugin seal') }) setTimeout(() => { console.log('TestPlugin make 111') callback() }, 3000) }) compiler.hooks.make.tapAsync("TestPlugin", (compilation, callback) => { setTimeout(() => { console.log('TestPlugin make 222') callback() }, 1000) }) compiler.hooks.make.tapAsync("TestPlugin", (compilation, callback) => { setTimeout(() => { console.log('TestPlugin make 333') callback() }, 2000) }) } } module.exports = TestPlugin 复制代码通过node查看compiler和compilation对象
通过console.log打印compiler和compilation对象在控制台很多内容看不清楚；
通过node查看 compiler 和 compilation 对象
在代码处 打
debugger;配置
package.json文件;node --inspect-brk表示执行第一行代码就会停下;node --inspect-brk ./node_modules/webpack-cli/bin/cli.js"scripts": { "debug": "node --inspect-brk ./node_modules/webpack-cli/bin/cli.js" }, 复制代码执行
npm run debug; 注意：debug 和 上面scripts中的 debug 对应；打开页面和 页面控制台；
在浏览器打开如下图所示的地址<br/> (例如：ws://127.0.0.1:9229/323fb448-e361-4047-982d-cf967936fa37) 或者打开任意页面刷新下都行，并打开 控制台；不行就多刷新几次，会控制台上有个node的logo,点击 nodejs 的logo。会出行一个断点调试面板；查看执行 并 查看控制台面板中变量值;F8 或者 点击下一步，会进入我们 在代码中 debugger 的位置；
自定义BannerWebpackPlugin
作用： 给打包输出文件添加注释。
开发思路：
需要打包输出前添加注释：需要使用
compiler.hooks.emit钩子，它是打包输出前触发。如何获取打包输出的资源?
compilation.assets可以获取所有即将输出的资源文件。
// banner-webpack-plugin.js class BannerWebpackPlugin { // 插件传递的选项，可以在 构造函数中接收下 constructor(options = {}) { this.options = options } apply(compiler) { // 在资源输出之前触发 compiler.hooks.emit.tap('BannerWebpackPlugin', (compilation) => { const extensions = ['css', 'js'] // 1. 获取即将输出的资源文件：compilation.assets // 2. 过滤只保留 js 和 css 资源 const assets = Object.keys(compilation.assets).filter(assetsPath => { // 将文件名切割， ['xxx', 'js] ['xxxxx', 'css] const splitted = assetsPath.split('.') // 获取最后一个文件扩展名 const extension = splitted[splitted.length - 1] // 判断是否包含 return extensions.includes(extension) }) const prefix = `/* * Author: ${this.options.author} */`; // 2. 遍历剩下资源添加上注释 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 复制代码 // webpack.config.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const BannerWebpackPlugin = require('./plugins/banner-webpack-plugin.js') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), filename: 'js/[name].js', clean: true, }, module: { rules: [] }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'public/index.html') }), // 给插件传递选项，插件会在 constructor中接收到 new BannerWebpackPlugin({ author: "老王" }) ], mode: 'production' } 复制代码运行 npx webpack后，查看 dist/js/main.js 中的内容。
自定义 CleanWebpackPlugin
作用：在webpack打包输出前将上次打包内容清空。
webpack5内置了该功能，clean: true就可以了。
开发思路
如何在打包输出前执行? 需要使用
compiler.hooks.emit钩子，它是打包输出前触发。如何清空上次打包内容?
获取打包输出目录： 通过
compiler对象。通过文件操作清空内容：通过
compiler.outputFileSystem操作文件。
// clean-webpack-plugin class CleanWebpackPlugin { apply(compiler) { // 2. 获取打包输出的目录 const outputPath = compiler.options.output.path const fs = compiler.outputFileSystem // 1. 注册钩子：在打包输出之前 emit compiler.hooks.emit.tap('CleanWebpackPlugin', compilation => { // 3. 通过fs删除打包输出的目录下的所有文件 this.removeFiles(fs, outputPath) }) } removeFiles(fs, filepath) { // 想要删除打包输出目录下所有资源，需要贤将目录下资源删除，才能删除这个目录 // 1. 读取当前目录下所有资源 const files = fs.readdirSync(filepath) // 2. 遍历一个个删除 // 2.1 遍历所有文件，判断是文件夹还是文件， files.forEach(file => { const path = `${filepath}/${file}` const fileStat = fs.statSync(path) // console.log(path) if (fileStat.isDirectory()) { // 2.2 是文件夹，就得删除下面所有文件，才能删除文件夹 this.removeFiles(fs, path) } else { // 2.3 是文件，直接删除 fs.unlinkSync(path) } }); } } module.exports = CleanWebpackPlugin 复制代码 // webpack-config.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const BannerWebpackPlugin = require('./plugins/banner-webpack-plugin.js') const CleanWebpackPlugin = require('./plugins/clean-webpack-plugin') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), filename: 'js/[name].js', // webpack5通过这个配置实现了这个功能， // clean: true, // 这边注释下，模拟 自定义 CleanWebpackPlugin插件 实现 clean: true功能 }, module: { rules: [] }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'public/index.html') }), // new TestPlugin(), new BannerWebpackPlugin({ author: "老王" }), new CleanWebpackPlugin() ], mode: 'production' } 复制代码自定义AnalyzeWebpackPlugin
作用：分析 webpack 打包资源大小，并输出分析文件。
开发思路：
在哪做?
compiler.hooks.emit,它是在打包输出前触发，我们需要分析资源大小同时添加上分析后的md文件
// analyze-webpack-plugin class AnalyzeWebpackPlugin { apply(compiler) { // emit 是异步串行钩子 compiler.hooks.emit.tap('AnalyzeWebpackPlugin', compilation => { // Object.entries 将对象变成二维数组。二维数组中第一项值是key, 第二项是value // 二维数组： [[key, value], [key, value]] const assets = Object.entries(compilation.assets) // md 表格语法： /* | 资源名 | 资源大小 | | --- | ---| |xxx.js | 22 | */ let source = `# 分析打包资源大小 \n| 名称 | 大小 | \n | --- | --- |`; // 1. 遍历所有即将输出的文件，得到其大小 assets.forEach(([filename, file]) => { source += `\n| ${filename} | ${file.size()} |` // 带单位 多少kb // source += `\n| ${filename} | ${Math.ceil(file.size() / 1024)}kb |` }) // 2. 生成一个 md 文件 // 添加资源 compilation.assets["analyze.md"] = { source() { return source }, size() { return source.length } } }) } } module.exports = AnalyzeWebpackPlugin 复制代码 // webpack-config.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const BannerWebpackPlugin = require('./plugins/banner-webpack-plugin.js') const CleanWebpackPlugin = require('./plugins/clean-webpack-plugin') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), filename: 'js/[name].js', // webpack5通过这个配置实现了这个功能， // clean: true, // 这边注释下，模拟 自定义 CleanWebpackPlugin插件 实现 clean: true功能 }, module: { rules: [] }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'public/index.html') }), // new TestPlugin(), new BannerWebpackPlugin({ author: "老王" }), new CleanWebpackPlugin(), new AnalyzeWebpackPlugin(), ], mode: 'production' } 复制代码HtmlWebpackPlugin工作原理
工作原理：
html-webpack-plugin
InlineChunkWebpackPlugin
作用：webpack打包生成的runtime文件太小了，额外发送请求性能不好，所有需要将其内联到js中，从而减少请求数量。
开发思路：
我们需要借助
html-webpack-plugin来实现在
html-webpack-plugin输出index.html前将内联runtime注入进去在删除多余的 runtime 文件。
如何操作
html-webpack-plugin
npm i safe-require -D 复制代码
// inline-chunk-webpack-plugin.js // plugins/inline-chunk-webpack-plugin.js const HtmlWebpackPlugin = require('safe-require')('html-webpack-plugin') class InlineChunkWebpackPlugin { constructor(tests) { this.tests = tests } apply(compiler) { compiler.hooks.compilation.tap("InlineChunkWebpackPlugin", compilation => { // 1. 获取 html-webpack-plugin的 hooks const hooks = HtmlWebpackPlugin.getHooks(compilation) // 2. 注册 html-webpack-plugin 的 hooks --> alterAssetTagGroups hooks.alterAssetTagGroups.tap('InlineChunkWebpackPlugin', assets => { // 3. 从里面将 script 的runtime 文件，变成 inline script assets.headTags = this.getInlineChunk(assets.headTags, compilation.assets) assets.bodyTags = this.getInlineChunk(assets.bodyTags, compilation.assets) }) // 删除 runtime文件 hooks.afterEmit.tap('InlineChunkHtmlPlugin', () => { Object.keys(compilation.assets).forEach(assetName => { if (this.tests.some((test) => assetName.match(test))) { delete compilation.assets[assetName] } }) }) }) } getInlineChunk(tags,assets) { return tags.map(tag => { if (tag.tagName !== 'script') return tag // 获取文件资源路径 const filepath = tag.attributes.src if(!filepath) return tag if (!this.tests.some((test) => test.test(filepath))) return tag return { tagName: 'script', innerHTML: assets[filepath].source(), closeTag: true, } }) } } module.exports = InlineChunkWebpackPlugin 复制代码 // webpack-config.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const BannerWebpackPlugin = require('./plugins/banner-webpack-plugin.js') const CleanWebpackPlugin = require('./plugins/clean-webpack-plugin') const InlineChunkWebpackPlugin = require('./plugins/inline-chunk-webpack-plugin') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), filename: 'js/[name].js', // webpack5通过这个配置实现了这个功能， // clean: true, // 这边注释下，模拟 自定义 CleanWebpackPlugin插件 实现 clean: true功能 }, module: { rules: [] }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'public/index.html') }), // new TestPlugin(), new BannerWebpackPlugin({ author: "老王" }), new CleanWebpackPlugin(), new AnalyzeWebpackPlugin(), new InlineChunkWebpackPlugin([/runtime(.*)\.js$/g]), ], optimization: { splitChunks: { chunks: 'all', }, runtimeChunk: { name: entrypoint => `runtime~${entrypoint.name}.js` } }, mode: 'production' }
作者：心有林兮
链接：https://juejin.cn/post/7169073560706236446