Webpackソースコードのローダー機構の詳細説明-jsチュートリアル-php.cn

Webpackソースコードのローダー機構の詳細説明

亚连

リリース： 2018-05-26 14:31:11

オリジナル

1659 人が閲覧しました

この記事では主に、webpack ソースコードのローダーメカニズムの詳細な説明を紹介し、参考として提供します。

ローダーの概念

ローダーは、さまざまな形式のリソースをロードして処理するために使用され、本質的にはファイルをパラメータとして受け取り、変換された構造を返す関数です。

loaderはモジュールのソースコードを変換するために使用されます。ローダーを使用すると、モジュールをインポートまたは「ロード」するときにファイルを前処理できます。したがって、ローダーは他のビルドツールの「タスク」に似ており、フロントエンドのビルドステップを処理する強力な方法を提供します。ローダーは、さまざまな言語 (TypeScript など) のファイルを JavaScript に変換したり、インライン画像をデータ URL に変換したりできます。ローダーを使用すると、CSS ファイルを JavaScript モジュールに直接インポートすることもできます。

ローダーとプラグインの違い

プラグインの仕組みは前回の記事で紹介しましたが、今日の学習の対象であるローダーは、合わせてwebpackの機能を大幅に拡張します。それらの違いは、ローダーはモジュールのソースコードを変換するために使用されるのに対し、プラグインの目的はローダーが達成できない他のことを解決することであるという点です。なぜそこまで言うのでしょうか? プラグインはどの段階でも呼び出すことができるため、ローダー全体でローダーの出力をさらに処理したり、ビルド実行中にイベントをトリガーしたり、事前に登録されたコールバックを実行したり、コンパイルオブジェクトを使用したりすることができます。いくつかの低レベルのもの。

ローダーの使用法

設定

module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     { loader: &#39;style-loader&#39; },
     {
      loader: &#39;css-loader&#39;
     }
    ]
   }
  ]
 }

ログイン後にコピー

インライン

import Styles from &#39;style-loader!css-loader?modules!./styles.css&#39;;

ログイン後にコピー

CLI

webpack --module-bind &#39;css=style-loader!css-loader&#39;

ログイン後にコピー

上記の 3 つの使用方法はすべて、次の目的で使用されることを説明します。チェーンされたローダーは右から左の順に実行され、ローダーチェーン内の最初のローダーは次のローダーに値を返します。まず css-loader を使用して @import および url() パスで指定された CSS コンテンツを解析し、次に style-loader を使用して元の CSS コードをページ内の style タグに挿入します。

ローダー実装

//将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(&#39;node_modules&#39;), path.resolve(__dirname, &#39;src&#39;, &#39;loaders&#39;)]
},
{
  test: /\.css$/,
  use: [&#39;style-loader&#39;]
},
//使用方式2
//将自己写的loaders发布到npm仓库,然后添加到依赖,按照方式1中的配置方式使用即可

ログイン後にコピー

解説上記は同期的に実行される単純なローダー実装であり、style-loaderの機能を実現するのと同等です。

ローダーの原理

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);
        }
      }
    );
  });
}

ログイン後にコピー

説明上記は、Webpack ソースコードでのローダー実行の主要な手順です。ローダーの実行プロセスは、エクスプレスミドルウェアのメカニズムと似ています

。皆さんのためにまとめたものです。今後皆さんのお役に立てれば幸いです。

Jquery の具体的な例で、AJAX を使用するタイミングと AJAX を使用する必要がある場所を紹介

js ロード時の Ajax プログレスバーコード

Ajax クロスドメイン問題に対する 2 つの解決策メソッド

以上がWebpackソースコードのローダー機構の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。