Webpack中的自定义 loader 的简单实现

2024/10/25 0:26:39 来源：https://blog.csdn.net/weixin_47342624/article/details/141615886 浏览: 次关键词：Webpack中的自定义 loader 的简单实现

1.loader简单介绍

webpack 中 loader 是用于对模块的源代码进行转换（处理）的插件。例如 webpack 中常见的loader， css-loader、babel-loader。

2.自定义 loader

关于 loader：

loader本质上是一个导出为函数的JavaScript模块，即函数；
loader runner库会调用这个函数，然后将上一个loader产生的结果或者资源文件传入进去；
自定义 loader函数的接收参数有content(资源文件的内容)、map(sourcemap的数据)、meta(一些元数据)；

例如自定义个 loader 并希望打包时指定类型文件能够经过自定义loader 的函数的处理：

自定义一个 hgf-loader01的 loader

const { validate } = require('schema-utils')
const schema = require('../schema/loader01-schema.json')module.exports = function(context) {console.log('testing hgf-custom-loader111111~~~~~~~~~~~~~~~~~~~');// 获取传入 optionsconst options = this.getOptions()validate(schema, options)console.log('hgf-custom-Options~~~~~~~~~~~~~~~~~~', options);return context + 'hgf-custom-loader'
}module.exports.pitch = function() {console.log('testing hgf-custom-loader111111-pitching~~~~~~~~~~~~~~~~~~~');}

3.关于 pitching loader

webpack 的官方文档中有对 pitching loader 的介绍，即自定义 loader 中的 pitch 属性

4.多 loader 的执行流程、顺序

例如该 webpack 中配置多个 loader进行打包：

const path = require('path')module.exports = {entry: './src/main.js',mode: 'development',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test:/\.js$/i,use: {loader: 'hgf-loader01',options: {parameter1: 'hgf-loader01----parameter1',parameter2: 2222}},enforce: 'pre'},{test:/\.js$/i,use: {loader: 'hgf-loader02'}},{test:/\.js$/i,use: {loader: 'hgf-loader03'}}]},resolveLoader: {modules: ['node_modules', './src/hgf-loader']}
}

loader 的内容

// hgf-loader01
const { validate } = require('schema-utils')
const schema = require('../schema/loader01-schema.json')module.exports = function(context) {console.log('testing hgf-custom-loader111111~~~~~~~~~~~~~~~~~~~');// 获取传入 optionsconst options = this.getOptions()validate(schema, options)console.log('hgf-custom-Options~~~~~~~~~~~~~~~~~~', options);return context + 'hgf-custom-loader'
}module.exports.pitch = function() {console.log('testing hgf-custom-loader111111-pitching~~~~~~~~~~~~~~~~~~~');}// hgf-loader02
module.exports = function(context) {console.log('testing hgf-custom-loader222222~~~~~~~~~~~~~~~~~~~');return context + 'hgf-custom-loader'
}module.exports.pitch = function() {console.log('testing hgf-custom-loader222222-pitching~~~~~~~~~~~~~~~~~~~');}// hgf-loader03module.exports = function(context) {console.log('testing hgf-custom-loader333333~~~~~~~~~~~~~~~~~~~');return context + 'hgf-custom-loader'
}module.exports.pitch = function() {console.log('testing hgf-custom-loader333333-pitching~~~~~~~~~~~~~~~~~~~');}

打包运行结果：

可看到从上往下依次运行 loader 的 pitching loader，再从下往上的运行 loader，pitching loader从上往下运行，可以在 pitching 阶段，传递给 pitch 方法的 data，在执行阶段也会暴露在 this.data 之下，并且可以用于在循环时，捕获并共享前面的信息。