Webpackにおけるローダー

Webpackの機能を拡張するためには、ローダーも使用されます。これらは特定のタイプのファイルを取り、それらに対して特定の操作を実行することを可能にします。

例えば、拡張子が.lessのすべてのファイルを取り、そのテキストをCSSに変換し、その後、得られたCSSを最小化し、一つの共通ファイルに保存することができます。

架空の2つのローダーの例を使って、ローダーを扱う一般的なスキームを見てみましょう。

最初のローダーをインストールしましょう：

npm install test-loader1 --save-dev

2番目のローダーをインストールしましょう：

npm install test-loader2 --save-dev

ローダーをインストールした後、設定ファイルでそれらを使用できます（インポートする必要はありません）。構文を参照してください：

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.css$/i, // ファイルタイプ
				use: ['test-loader1', 'test-loader2'], // ローダー
			},
		],
	},
};

配列の要素は一行で書く代わりに、縦に書くこともできます：

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [
					'test-loader1',
					'test-loader2'
				],
			},
		],
	},
};

異なるファイルタイプに対して、異なるルールを書くことができます：

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.sass$/i,
				use: [
					'test-loader1',
					'test-loader2'
				],
			},
			{
				test: /\.less$/i,
				use: [
					'test-loader3',
					'test-loader4'
				],
			},
		],
	},
};

ローダーは順番に実行されます。この順序は配列の末尾から始まります。つまり、配列の最後の要素として指定されたローダーが最初に実行され、次に最後から2番目のローダーという具合に実行されます。