【JavaScript】webpack のローダーで色々なファイル形式を JavaScript ソースコードとして扱える

 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 のローダーをどうこうすると目的を達成しやすいです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG