ホームページ > 記事 > ウェブフロントエンド > Webpackソースコードのローダー機構の詳細説明
この記事では主に、webpack ソースコードのローダーメカニズムの詳細な説明を紹介し、参考として提供します。
ローダーの概念
ローダーは、さまざまな形式のリソースをロードして処理するために使用され、本質的にはファイルをパラメータとして受け取り、変換された構造を返す関数です。
loaderはモジュールのソースコードを変換するために使用されます。ローダーを使用すると、モジュールをインポートまたは「ロード」するときにファイルを前処理できます。したがって、ローダーは他のビルド ツールの「タスク」に似ており、フロントエンドのビルド ステップを処理する強力な方法を提供します。ローダーは、さまざまな言語 (TypeScript など) のファイルを JavaScript に変換したり、インライン画像をデータ URL に変換したりできます。ローダーを使用すると、CSS ファイルを JavaScript モジュールに直接インポートすることもできます。
ローダーとプラグインの違い
プラグインの仕組みは前回の記事で紹介しましたが、今日の学習の対象であるローダーは、合わせてwebpackの機能を大幅に拡張します。それらの違いは、ローダーはモジュールのソース コードを変換するために使用されるのに対し、プラグインの目的はローダーが達成できない他のことを解決することであるという点です。なぜそこまで言うのでしょうか? プラグインはどの段階でも呼び出すことができるため、ローダー全体でローダーの出力をさらに処理したり、ビルド実行中にイベントをトリガーしたり、事前に登録されたコールバックを実行したり、コンパイル オブジェクトを使用したりすることができます。いくつかの低レベルのもの。
ローダーの使用法
設定
module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] } ] }
インライン
import Styles from 'style-loader!css-loader?modules!./styles.css';
CLI
webpack --module-bind 'css=style-loader!css-loader'
上記の 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('node_modules'), path.resolve(__dirname, 'src', 'loaders')] }, { test: /\.css$/, use: ['style-loader'] }, //使用方式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 を使用する必要がある場所を紹介
Ajax クロスドメイン問題に対する 2 つの解決策 メソッド
以上がWebpackソースコードのローダー機構の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。