ルールの書き方／ローダーの設定 (rules / loader) [Webpack]

ローダー

参考：

webpack の Loader を試してみる – Qiita

webpack で css と image をバンドルする – Qiita

ローダー | Webpack 1.13.0 日本語リファレンス (js STUDIO)

webpack ちゃんと理解しとこ loader 編 – Qiita

Loaders | webpack [Official]

Loaders (list) | webpack [Official]

書き方

参考：

webpack2 へ移行する軽いメモ | 技術探し

Loader Definitions | SurviveJS

module.rules | Webpack [Official]

ローダーの順序

参考：

Loader Features | Webpack [Official]

What is the loader order for webpack? – Stack Overflow

exclude

参考：

webpack で node_modules を babel-loader の対象から除外すると、ES2015+ で書かれた npm パッケージのモジュールが Babel で変換されない問題 – Qiita

webpack で module.include を指定すると loader が動作しなくなります｜teratail

Rule.exclude | Webpack [Official]

Condition | Webpack [Official]

webpack/ContextModuleFactory.js at v4.32.2 · webpack/webpack – GitHub

loader exclude not working with resolve config? · Issue #3 · webpack-contrib/jshint-loader – GitHub

include

参考：

Rule.include | Webpack [Official]

Condition | Webpack [Official]

How to configure a loader for a specific path in webpack – Stack Overflow

Rule.oneOf

参考：

Rule.oneOf | Webpack [Official]

Rule.resourceQuery

参考：

Rule.resourceQuery | Webpack [Official]

vue loader different loaders for one extension – Stack Overflow

import / require でローダーを指定する

インラインローダーの指定

• ! で区切って複数のローダーを指定する (右から順に処理)
• 各ローダーの後に ? に続けてクエリーパラメーターを指定する
• 先頭に ! を書くと通常のローダーをスキップ
• 先頭に -! を書くとプリローダーと通常のローダーをスキップ
• 先頭に !! を書くとプリローダー、通常のローダー、ポストローダーをスキップ

参考：

Inline | Webpack [Official]

Rule.enforce | Webpack [Official]

マルチローダー

参考：

webpack-contrib/multi-loader: A loader that splits a module into multiple modules loaded with different loaders – GitHub

Process the same module multiple times with separate rules/loaders · Issue #5433 · webpack/webpack – GitHub

Show warning when loader is applied multiple times · Issue #3359 · webpack/webpack – GitHub