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

javascript 复制代码
const { validate } = require('schema-utils')
const schema = require('../schema/loader01-schema.json')

module.exports = function(context) {

  console.log('testing hgf-custom-loader111111~~~~~~~~~~~~~~~~~~~');
  // 获取传入 options
  const 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进行打包:

javascript 复制代码
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 的内容

javascript 复制代码
// hgf-loader01
const { validate } = require('schema-utils')
const schema = require('../schema/loader01-schema.json')

module.exports = function(context) {

  console.log('testing hgf-custom-loader111111~~~~~~~~~~~~~~~~~~~');
  // 获取传入 options
  const 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-loader03

module.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 之下,并且可以用于在循环时,捕获并共享前面的信息。

a.webpack 的 resolveLoader 属性

webpack 中通过配置resolveLoader属性,设置 webpack 解析文件的查找来源

b.webpage 的 enforce 属性

webpack 中 loader 的执行顺序默认是从下往上依次执行 loader 对资源文件进行处理,但是 webpack 也提供了 enforce 属性,可以指定 loader 的执行顺序

"pre": 设置第一个执行, "post"设置最后一个执行

例如将上面代码的 loader 改为如下顺序,配置 enforce 属性后,loader 的执行顺序变化

可看出默认从下往上应该为 loader03 →loader02→loader01,配置 enforce 属性后,基于属性配置值进行了 loader 执行顺序的改变。

相关推荐
范文杰33 分钟前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪41 分钟前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪1 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy2 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom2 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom2 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom2 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom2 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom3 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI3 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端