Webpackにおけるローダー

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

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

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

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

terminalnpm install test-loader1 --save-dev

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

terminalnpm install test-loader2 --save-dev

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

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

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

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

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

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