ローダー
ローダーは、モジュールのソースコードに適用される変換です。ファイルの `import` または「ロード」時にファイルを前処理することができます。そのため、ローダーは他のビルドツールにおける「タスク」のようなものであり、フロントエンドのビルドステップを処理するための強力な方法を提供します。ローダーは、異なる言語（TypeScript など）のファイルを JavaScript に変換したり、インライン画像をデータ URL としてロードしたりできます。ローダーを使用すると、JavaScript モジュールから CSS ファイルを直接 `import` することさえできます！
例
たとえば、ローダーを使用して、webpack に CSS ファイルをロードしたり、TypeScript を JavaScript に変換したりするように指示できます。そのためには、まず必要なローダーをインストールします
npm install --save-dev css-loader ts-loader次に、webpack に対して、すべての `.css` ファイルに `css-loader` を、すべての `.ts` ファイルに `ts-loader` を使用するように指示します
webpack.config.js
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' },
],
},
};ローダーの使用
アプリケーションでローダーを使用するには、2 つの方法があります
webpack v4 では CLI からローダーを使用できましたが、この機能は webpack v5 で非推奨になりました。
設定
`module.rules` を使用すると、webpack 設定内で複数のローダーを指定できます。これはローダーを表示するための簡潔な方法であり、クリーンなコードを維持するのに役立ちます。また、それぞれのローダーの全体像も把握できます。
ローダーは、右から左（または下から上）に評価/実行されます。以下の例では、sass-loader から実行が開始され、css-loader、最後に style-loader と続きます。ローダーの順序の詳細については、「ローダーの機能」 を参照してください。
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
},
},
{ loader: 'sass-loader' },
],
},
],
},
};インライン
`import` ステートメント、または任意の 同等の「インポート」メソッド でローダーを指定できます。`!` でローダーとリソースを区切ります。各部分は現在のディレクトリを基準にして解決されます。
import Styles from 'style-loader!css-loader?modules!./styles.css';インライン `import` ステートメントにプレフィックスを付けることで、設定 からのローダー、preLoaders、postLoaders をオーバーライドできます
`!` をプレフィックスに付けると、設定されているすべての通常のローダーが無効になります
import Styles from '!style-loader!css-loader?modules!./styles.css';`!!` をプレフィックスに付けると、設定されているすべてのローダー (preLoaders、ローダー、postLoaders) が無効になります
import Styles from '!!style-loader!css-loader?modules!./styles.css';`-!` をプレフィックスに付けると、設定されているすべての preLoaders とローダーが無効になりますが、postLoaders は無効になりません
import Styles from '-!style-loader!css-loader?modules!./styles.css';
オプションは、クエリパラメータ (例: `?key=value&foo=bar`) または JSON オブジェクト (例: `?{"key":"value","foo":"bar"}`) で渡すことができます。
ローダーの機能
- ローダーはチェーン化できます。チェーン内の各ローダーは、処理されたリソースに変換を適用します。チェーンは逆の順序で実行されます。最初のローダーは、その結果（変換が適用されたリソース）を次のローダーに渡し、以下同様に続きます。最終的に、webpack はチェーンの最後のローダーによって JavaScript が返されることを期待します。
- ローダーは同期または非同期にすることができます。
- ローダーは Node.js で実行され、そこで可能なことはすべて実行できます。
- ローダーは `options` オブジェクトで設定できます (`query` パラメータを使用してオプションを設定することもできますが、非推奨となっています)。
- 通常のモジュールは、`loader` フィールドを持つ `package.json` を介して、通常の `main` に加えてローダーをエクスポートできます。
- プラグインはローダーにさらに多くの機能を提供できます。
- ローダーは追加の任意のファイルを発行できます。
ローダーは、前処理関数を通じて出力をカスタマイズする方法を提供します。ユーザーは、圧縮、パッケージ化、言語翻訳など、よりきめ細かいロジックを含めるための柔軟性を高めることができます。詳細
ローダーの解決
ローダーは標準の モジュール解決 に従います。ほとんどの場合、モジュールパス ( `npm install`、`node_modules` など) からロードされます。
ローダーモジュールは関数をエクスポートし、Node.js 互換の JavaScript で記述されることが期待されます。それらは通常 npm で管理されますが、アプリケーション内のファイルとしてカスタムローダーを持つこともできます。慣例により、ローダーの名前は通常 `xxx-loader` です (例: `json-loader`)。詳細は "ローダーの作成" を参照してください。
15 貢献者
