webpack は JavaScript を主としていろいろなものをコンパイルするためのツールです。
webpack
JavaScript になる JavaScript でない言語で書かれたファイル(例えば、ReactのJSX、Vue、TypeScript)や CSS になる CSS でない言語で書かれたファイル(例えば Sass)を平の JavaScript, CSS に変換したり、複数ファイルに分かれた JavaScript ファイルを一つにしたり、多くのブラウザで使えるようにしたり、圧縮したり、と色々なことが webpack を介して行えます。
これほど多彩なことをするのに役に立つのがローダーという仕組みです。ローダーは特定の形式のファイルを特定の形式に変換する仕組みを持った機能のことです。巷にあふれるライブラリの様に様々な人、団体がローダーを作っており、意外なもののローダーもあります。
Loaders | webpack#concepts
下記リンクは公式サイトの内部で紹介されているローダーらです。
Loaders | webpack#example
何でもないテキストファイルをexport default
で露出している文字列変数として見るような raw-loader、 マークダウンを HTML に変換する markdown-loader といったものがあります。PHP 界隈でまあまあよく使われている twig (Symfony、FuelPHP などのデフォルト)のローダーもあります。twig-loader を使えば PHP の twig エンジンで作っていたプログラムをテンプレートを書き換えずにフロントエンドに持ってこれます(twig の拡張の書き換えは必要そうですが)。PHP のフレームワークの一つである Laravel のデフォルトである blade のローダーもあります。
上記リンク集にはないですが npm や GitHub をwebpack laoder 目当ての形式
調べると大体出てきます。最近自分が使ったものでは yaml-loader があります。
yaml-loader – npm
JavaScript 上で文言を書くことが例とされていた多言語対応ライブラリに読み込ませる文言オブジェクトを次画像の様に yaml で書くようにしました。
元々 JavaScript と関係ない形式のファイルを特別変換せずに JavaScript 上でそのまま扱いたい時はこの webpack のローダーをどうこうすると目的を達成しやすいです。