Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie den Webpack-Quellcode-Lademechanismus

php中世界最好的语言
Freigeben: 2018-05-26 15:36:07
Original
1357 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie den Webpack-Quellcode-Lademechanismus verwenden und welche Vorsichtsmaßnahmen für die Verwendung des Webpack-Quellcode-Lademechanismus gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Loader-Konzept

Loader wird zum Laden und Verarbeiten verschiedener Formen von Ressourcen verwendet. Es handelt sich im Wesentlichen um eine Funktion, die Dateien als Parameter akzeptiert und die konvertierte Struktur zurückgibt .

Loader wird zum Konvertieren des Quellcodes des Moduls verwendet. Mit Loadern können Sie Dateien beim Importieren oder „Laden“ von Modulen vorverarbeiten. Daher ähneln Lader „Aufgaben“ in anderen Build-Tools und bieten eine leistungsstarke Möglichkeit, Front-End-Build-Schritte zu verarbeiten. Loader können Dateien aus verschiedenen Sprachen (z. B. TypeScript) in JavaScript oder Inline-Bilder in Daten-URLs konvertieren. Mit dem Loader können Sie sogar CSS-Dateien direkt in JavaScript-Module importieren!

Der Unterschied zwischen Loader und Plugin

Der Plugin-Mechanismus wurde im vorherigen Artikel vorgestellt, und der Loader, das Objekt der heutigen Studie, zusammen sind sie Die Funktionalität von Webpack wurde erheblich erweitert. Der Unterschied besteht darin, dass der Loader zum Konvertieren des Quellcodes des Moduls verwendet wird, während der Zweck des Plug-Ins darin besteht, andere Dinge zu lösen, die der Loader nicht erreichen kann. Warum sagen Sie so viel? Da das Plugin jederzeit aufgerufen werden kann, kann es die Ausgabe des Loaders im gesamten Loader weiterverarbeiten, Ereignisse während des Build-Laufs auslösen, vorregistrierte Rückrufe ausführen und das Kompilierungsobjekt verwenden einige Dinge auf niedrigerer Ebene.

Loader-Nutzung

Konfiguration

module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     { loader: 'style-loader' },
     {
      loader: 'css-loader'
     }
    ]
   }
  ]
 }
Nach dem Login kopieren

Inline

import Styles from 'style-loader!css-loader?modules!./styles.css';
Nach dem Login kopieren

CLI

webpack --module-bind 'css=style-loader!css-loader'
Nach dem Login kopieren

erklärt, dass die oben genannten drei Verwendungsmethoden darin bestehen, eine Reihe verketteter Lader der Reihe nach von rechts nach links auszuführen und der erste Lader in der Laderkette den Wert an den nächsten Lader zurückzugeben. Verwenden Sie zunächst den CSS-Loader, um den in den Pfaden @import und url() angegebenen CSS-Inhalt zu analysieren, und verwenden Sie dann den Style-Loader, um den ursprünglichen CSS-Code in ein Style-Tag auf der Seite einzufügen.

Loader-Implementierung

//将css插入到head标签内部
module.exports = function (source) {
  let script = (`
   let style = document.createElement("style");
   style.innerText = ${JSON.stringify(source)};
   document.head.appendChild(style);
  `);
  return script;
}
//使用方式1
resolveLoader: {
  modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
  test: /\.css$/,
  use: ['style-loader']
},
//使用方式2
//将自己写的loaders发布到npm仓库,然后添加到依赖,按照方式1中的配置方式使用即可
Nach dem Login kopieren

Erläuterung Das Obige ist eine einfache Loader-Implementierung, die synchron ausgeführt wird, was der Realisierung der Funktion des Style-Loaders entspricht.

Loader-Prinzip

function iteratePitchingLoaders(options, loaderContext, callback) {
  var currentLoaderObject = loaderContext.loaders[loaderContext.loaderIndex];
  // load loader module
  loadLoader(currentLoaderObject, function(err) {
    var fn = currentLoaderObject.pitch;
    runSyncOrAsync(
      fn,
      loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, currentLoaderObject.data = {}],
      function(err) {
        if(err) return callback(err);
        var args = Array.prototype.slice.call(arguments, 1);
        if(args.length > 0) {
          loaderContext.loaderIndex--;
          iterateNormalLoaders(options, loaderContext, args, callback);
        } else {
          iteratePitchingLoaders(options, loaderContext, callback);
        }
      }
    );
  });
}
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

So verwenden Sie Sortable in Vue

So verwenden Sie JS zur Implementierung der Operatorüberladung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Webpack-Quellcode-Lademechanismus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!