ローダー

Webpackでは、ローダーを使用してファイルを前処理できます。これにより、JavaScript以外にもあらゆる静的リソースをバンドルできます。Node.jsを使用して独自のローダーを簡単に作成できます。

ローダーは、require()ステートメントで`loadername!`プレフィックスを使用するか、Webpack設定から正規表現を使用して自動的に適用されます。 設定を参照してください。

ファイル

• val-loader コードをモジュールとして実行し、エクスポートをJSコードとして扱います
• ref-loader 任意のファイル間の依存関係を手動で作成します

JSON

• cson-loader CSONファイルをロードしてトランスパイルします

トランスパイル

• babel-loader ES2015+コードをロードし、Babelを使用してES5にトランスパイルします
• esbuild-loader ES2015+コードをロードし、esbuildを使用してES6+にトランスパイルします
• buble-loader ES2015+コードをロードし、Bubléを使用してES5にトランスパイルします
• traceur-loader ES2015+コードをロードし、Traceurを使用してES5にトランスパイルします
• ts-loader TypeScript 2.0+をJavaScriptのようにロードします
• coffee-loader CoffeeScriptをJavaScriptのようにロードします
• fengari-loader fengariを使用してLuaコードをロードします
• elm-webpack-loader ElmをJavaScriptのようにロードします

テンプレート

• html-loader HTMLを文字列としてエクスポートし、静的リソースへの参照を必要とします
• pug-loader PugとJadeテンプレートをロードし、関数を返します
• markdown-loader MarkdownをHTMLにコンパイルします
• react-markdown-loader markdown-parseパーサーを使用してMarkdownをReactコンポーネントにコンパイルします
• posthtml-loader PostHTMLを使用してHTMLファイルをロードして変換します
• handlebars-loader HandlebarsをHTMLにコンパイルします
• markup-inline-loader SVG/MathMLファイルをHTMLにインライン化します。アイコンフォントの適用やSVGへのCSSアニメーションの適用に役立ちます。
• twig-loader Twigテンプレートをコンパイルし、関数を返します
• remark-loader 組み込みの画像解像度機能付きで、remark を使用して Markdown を読み込みます

スタイル設定

• style-loader モジュールのエクスポートを DOM のスタイルとして追加します
• css-loader インポートを解決して CSS ファイルを読み込み、CSS コードを返します
• less-loader LESS ファイルを読み込んでコンパイルします
• sass-loader SASS/SCSS ファイルを読み込んでコンパイルします
• postcss-loader PostCSS を使用して CSS/SSS ファイルを読み込み、変換します
• stylus-loader Stylus ファイルを読み込んでコンパイルします

フレームワーク

• vue-loader Vue コンポーネント を読み込んでコンパイルします
• angular2-template-loader Angular コンポーネントを読み込んでコンパイルします

その他

その他のサードパーティ製ローダーについては、awesome-webpack のリストを参照してください。