Comment Webpack implémente-t-il Loader ? (avec code)

Le contenu de cet article explique comment Webpack implémente Loader ? (Le code est ci-joint), qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Comment implémenter un Loader ?

Nous avons parlé des chargeurs dans les sections précédentes. Aujourd'hui, nous en apprendrons davantage sur eux. La manière la plus violente est de les implémenter à la main.

Bon, revenons au sujet, passons en revue. les chargeurs en premier.

Définition du chargeur : utilisé pour convertir le code source du module. Loader vous permet de prétraiter des fichiers lors de l'importation ou du "chargement" de modules

Facile à utiliser

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            // loader 是导出为一个a函数的 node 模块。该函数在 loader 转换资源的时候调用
            // 给定的函数将调用 loader API，并通过 this 上下文访问
            loader: path.resolve('loader.js'),
            options: {/* ... */}
          }
        ]
      }
    ]
  }
};

Après avoir examiné la définition et l'utilisation simple du chargeur, analysons l'idée d'implémenter le chargeur

Combinaison de chaînes, chaque chargeur de la chaîne appliquera la conversion aux ressources traitées

Modulaire, oui Le module de nœud exporté en fonction

Sur la base des points analysés ci-dessus, nous avons commencé à le faire

// 这个就是一个最简单loader，
// 如果我们的loader有依赖其它模块，也得以module的写法将在在顶部引入
import fs from 'fs';
export default function(source){
    return source
}

Nous avons constaté que return était utilisé directement au dessus, oui Parce que il s'agit d'un chargeur synchrone et renvoie un contenu unique, si vous souhaitez que votre chargeur prenne en charge les appels en chaîne et renvoie les résultats au chargeur suivant pour une utilisation continue, vous devez alors utiliser l'API fournie par webpack

Ici, nous prenons un bref aperçu de la définition de this.callback, une fonction qui peut être appelée de manière synchrone ou asynchrone et qui peut renvoyer plusieurs résultats. Les paramètres attendus sont

this.callback(
  err: Error | null,
  content: string | Buffer,
  sourceMap?: SourceMap,
  meta?: any
)

// loader-utils 它提供了很多有用的工具
// 最常用的一个就是获取传入 loader 的 options
import { getOptions } from 'loader-utils';
export default function(source, other) {
  const options = getOptions(this)    
  // do whatever you want
  // ...
  this.callback(null, source, other)
}

Écrire un chargeur à la main peut paraître un peu difficile pour ceux qui ne l'ont pas étudié. En fait, une fois que vous maîtrisez le contenu et les idées présentées ci-dessus, vous pouvez commencer. écrire un chargeur simple. Maintenant, utilisons un code simple pour expliquer ce qu'est exactement un chargeur ?

// 首先loader它是一个node模块，这很好理解
export const lessToCss = function(source, other) {
    // source 就是你即将要转换的文件源
    // TODO
    // 将转换好的文件源流转至一个管道
    this.callback(null, source, other)
}

Rendre votre chargeur plus utile

Il y a quelques gars utiles dans l'API du chargeur. , juste ici. Jetez un œil à

this.cacheable() Du point de vue de l'amélioration de l'efficacité d'exécution, la façon d'utiliser le cache est extrêmement importante dans webpack peut facilement mettre en cache le chargeur

import processResult from './processResult';
const render = pify(less.render.bind(less));

function lessLoader(source) {
  const loaderContext = this;
  const options = getOptions(loaderContext);
  const done = loaderContext.async();
  const isSync = typeof done !== 'function';

  if (isSync) {
    throw new Error(
      'Synchronous compilation is not supported anymore. See https://github.com/webpack-contrib/less-loader/issues/84'
    );
  }
  processResult(loaderContext, render(source, options));
}

Le chargeur est un module de nœud

Tutoriel vidéo JavaScript】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!