Webpack自定义Loader和Plugin方法

手写Loader

Loader 本质上是导出函数的 JavaScript 模块，而该模块导出的函数被称为 Normal Loader，在开发 Loader时，我们可以在导出的函数上添加一个 pitch 属性，它的值也是一个函数。该函数被称为 PitchingLoader。Loader执行时会先执行Pitching Loader再执行Normal Loader， Pitching Loade的执行顺序是从左到右，而 Normal Loader 的执行顺序是从右到左。

借用他人示意图如下：

开发之前需要明确的点

首先明确loader默认导出一个函数，接受匹配到的文件资源字符串和SourceMap
处理异步loader时，需要通过loader本身提供的回调函数callback
加载本地loader的方法是通过webpack提供的resolveLoader属性，来告诉webpack从哪里解析本地loader
可以通过工具loader-utils的getOptions方法获得参数，通过schema-utils的validate方法来检验获得的参数是否符合规则

const { getOptions } = require("loader-utils");
const { validate } = require("schema-utils");
const schema = require("./schema.json");
module.exports = function (source, map) {const options = getOptions(this);const configuration = { name: "Loader Name"};validate(schema, options, configuration);//省略其他代码
}

手写Plugin

在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过Webpack提供的API改变输出结果。plugin的本质是类；我们在定义plugin时，其实是在定义一个类。

//plugins/MyPlugin.js
class MyPlugin {constructor(options) {console.log("Plugin被创建了");console.log(options);this.options = options;}apply (compiler) {//注册完成的钩子compiler.hooks.done.tap("MyPlugin", (compilation) => {console.log("compilation done");});}
}
//webpack.config.js
module.exports = {plugins: [new MyPlugin({ title: 'MyPlugin' })],
}

我们在构建插件时就能通过options获取配置信息，对插件做一些初始化的工作。在构造函数中我们发现多了一个apply函数，它会在webpack运行时被调用，并且注入compiler对象；其工作流程如下

webpack启动，执行new myPlugin(options)，初始化插件并获取实例
初始化complier对象，调用myPlugin.apply(complier)给插件传入complier对象
插件实例获取complier，通过complier监听webpack广播的事件，通过complier对象操作webpack

这里又有一个compilation对象，它和上面提到的compiler对象都是Plugin和webpack之间的桥梁：

compiler对象包含了 Webpack 环境所有的的配置信息。这个对象在启动 webpack
时被一次性建立，并配置好所有可操作的设置，包括 options，loader 和 plugin。当在 webpack
环境中应用一个插件时，插件将收到此 compiler 对象的引用。可以使用它来访问 webpack 的主环境。
compilation对象包含了当前的模块资源、编译生成资源、变化的文件等。当运行webpack
开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源。compilation
对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。

了解了compiler和compilation的区别，我们就来尝试一个简单的示例插件，在打包目录生成一个filelist.md文件，文件的内容是将所有构建生成文件展示在一个列表中：

class FileListPlugin {apply(compiler){compiler.hooks.emit.tapAsync('FileListPlugin', (compilation, callback)=>{var filelist = 'In this build:\n\n';// 遍历所有编译过的资源文件，// 对于每个文件名称，都添加一行内容。for (var filename in compilation.assets) {filelist += '- ' + filename + '\n';}// 将这个列表作为一个新的文件资源，插入到 webpack 构建中：compilation.assets['filelist.md'] = {source: function() {return filelist;},size: function() {return filelist.length;}};callback();})}
}
module.exports = FileListPlugin

我们这里用到了assets对象，它是所有构建文件的一个输出对象，打印出来大概长这样：

{'main.bundle.js': { source: [Function: source], size: [Function: size] },'index.html': { source: [Function: source], size: [Function: size] }
}

我们手动加入一个filelist.md文件的输出；打包后我们在dist文件夹中会发现多了这个文件：

In this build:- main.bundle.js
- index.html

Webpack自定义Loader和Plugin方法相关推荐

webpack的loader与plugin原理
文章目录 loader原理 loader执行顺序 loader使用方式 loader的实现参数同步loader 异步loader Raw loader Pitching loader loader ...
Webpack中Loader和Plugin的区别和编写思路
由于webpack基于发布订阅模式,在运行的生命周期中会广播出许多事件,插件通过监听这些事件,就可以在特定的阶段执行自己的插件任务一.区别前面两节我们有提到Loader与Plugin对应的概念,先 ...
【前端知识之webpack】Loader和Plugin都是什么，有什么区别
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍Loader和Plugin都是什么,有什么区别. 文章目录前言一.Loader是什么二.Plugin是什么三.Loader和Plugin ...
html loader使用方法,webpack中loader的使用方法，以及几个常用loader的应用小实例
loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容. 可能,你会遇到当你用webpack打包的时候,提示你需要一个loader来处理文件,那we ...
Webpack 常用 loader 和 plugin 汇总
基于 Webpack 4 和 Webpack 5 Loader 名称描述 eslint-loader 代码规范检查.eslint-config-airbnb eslint-config-alloy ...
webpack自定义loader并发布到npm
一.官网对loader的解释: 1.loader 是导出为一个函数的 node 模块.该函数在 loader 转换资源的时候调用.给定的函数将调用 loader API,并通过 this 上下文访问. ...
webpack自定义loader
创建自己的Loader 创建自己的Loader Loader是用于对模块的源代码进行转换(处理),css-loader.style-loader.babel-loader等. 如何自定义自己的Load ...
webpack常用loader和plugin及打包速度优化
优化或也可以用: 备用: 慎用的配置,用的不好会增加打包时间: 代码丑化插件: 更多专业前端知识,请上 [猿2048]www.mk2048.com
webpack基础学习，各个loader和plugin的具体配置
一.邂逅Webpack Webpack是什么 webpack是一个静态的模块化打包工具,为现代的JavaScript应用程序: 打包bundler:webpack可以将帮助我们进行打包,所以它是一个打 ...

Webpack自定义Loader和Plugin方法

手写Loader

手写Plugin

Webpack自定义Loader和Plugin方法相关推荐

最新文章

热门文章