Awesome webpack

素晴らしいwebpackのリソース、ライブラリ、ツール、アプリケーションを厳選したリストです。 awesomeリストに触発されています。自由にこのリストを改善して貢献してください。

Webpackエコシステム

Webpackのサポート

コミュニティ

Twitter

Webpackに情熱を注ぐ人々(特に順序はありません)

ライブラリ

ローダー

ファイルの種類

  • HTMLローダー:WebpackのHTMLローダーモジュール。-- *メンテナー*:`Webpackチーム` Github
  • レスポンシブローダー:レスポンシブ画像用のローダー。-- *メンテナー*:`Jeremy Stucki` Github
  • SVG URLローダー:SVGファイルをutf-8エンコードされたURLとして読み込むローダー。-- *メンテナー*:`Hovhannes Babayan` Github
  • mermaidローダー:Webpackのmermaidローダーモジュール(ダイアグラム)。-- *メンテナー*:`Paul Musso` Github
  • wasmローダー:Webpackのwasmバイナリローダーモジュール。-- *メンテナー*:`Arthur Buldauskas` Github
  • Imageminローダー/プラグイン:webpackの画像最小化ローダー+プラグイン。-- *メンテナー*:`itgalaxy inc.` Github
  • Bin Execローダー:任意のファイルを任意のバイナリを通してパイプします。-- *メンテナー*:`Rafael Milewski` Github
  • GraphQLローダー:`.graphql`ドキュメントローダー。-- *メンテナー*:`Stephen Wan` Github

コンポーネントとテンプレート

  • Angular2テンプレートローダー:Angular2コンポーネントにHTMLとスタイルをインライン化します。-- *メンテナー*:`Sean Larkin` Github Twitter
  • Handlebarsローダー:WebpackのHandlebarsテンプレートローダー。-- *メンテナー*:`Paul Carduner` Github Twitter
  • Vueローダー:Vue.jsコンポーネントのWebpackローダー。-- *メンテナー*:`Vuejsチーム` Github Twitter
  • SVG Reactローダー - Webpack SVG to Reactコンポーネントローダー。-- *メンテナー*:`Jerry Hamlet` Github Twitter
  • Underscoreローダー - UnderscoreとLodashテンプレートローダー。-- *メンテナー*:`Emmanuel Antico` Github Twitter
  • ngTemplateローダー - Angular1テンプレートローダー。-- *メンテナー*:`Toby Rahilly` Github
  • ngInlineStylesLoader:AngularコンポーネントのインラインCSSを最適化します。-- *メンテナー*:`Severin Friede` Github
  • Markup-inlineローダー SVGをHTMLにインライン化 -- *メンテナー*:`Zhicheng Wang` Github
  • Polymerローダー - Polymerエレメントのローダー。-- *メンテナー*:`Rob Dodson` Github - `Chad Killingsworth` Github - `Bryan Coulter` Github
  • Tagローダー - Riotタグファイルのローダー。-- *メンテナー*:`Riotチーム` Github Twitter
  • Twigローダー - Twigテンプレートローダー。-- *メンテナー*:`Zimmo.beチーム` Github
  • Auto ngTemplateローダー:Angular 1テンプレートを自動検出し、読み込みます。-- *メンテナー*:`Yash Kulshrestha` Github
  • Pugローダー - Pugテンプレートローダー(旧Jade)。-- *メンテナー*:`Pugチーム` Github
  • シンプルなNunjucksローダー - Nunjucksテンプレートローダー。-- *メンテナー*:`ogonkov` Github

スタイル

  • スタイルローダー:Webpackのスタイルローダーモジュール。-- *メンテナー*:`Webpackチーム` Github
  • PostCSSローダー:WebpackのPostCSSローダー。-- *メンテナー*:`PostCSSチーム` Github Twitter
  • CSS Loader:Webpack の CSS ローダーモジュール。-- メンテナーWebpack チーム Github
  • SASS Loader:Webpack の SASS ローダー。-- メンテナーJorik Tangelder Github Twitter
  • Less Loader:Webpack の Less ローダーモジュール。-- メンテナーWebpack チーム Github
  • Stylus Loader:Webpack 用の Stylus ローダー。-- メンテナーKyle Robinson Young Github Twitter
  • Isomorphic Style Loader:Webpack 用のアイソモルフィック CSS スタイルローダー。-- メンテナーKriasoft チーム Github Twitter
  • Minify CSS-in-JS Loader:Webpack 用の正規表現ベースの CSS-in-JS ミニファイローダー。Babel は不要です。-- メンテナーZack Young Github Twitter
  • SASS Resources Loader:SASS リソース(変数、mixin など)をグローバルにインポートします。-- メンテナーShakaCode Github Twitter

言語とフレームワーク

  • TS Loader:Webpack 用の TypeScript ローダー。-- メンテナーTypeStrong チーム Github
  • Coffee Loader:Webpack の CoffeeScript ローダーモジュール。-- メンテナーWebpack チーム Github
  • Bootstrap Loader:Webpack バンドルに Bootstrap スタイルをロードします。-- メンテナーShakaCode チーム Github Twitter
  • PostHTML Loader:Webpack 用の PostHTML ローダー。-- メンテナーPostHTML チーム Github Twitter
  • ELM Loader:Elm プログラミング言語用の Webpack ローダー。-- メンテナーRichard Feldman Github Twitter
  • Fengari LoaderFengari を使用して Lua コードを実行します。-- メンテナーDaurnimator Github Twitter

ユーティリティ

  • Babel Loader:Babel 用の Webpack プラグイン。-- メンテナーBabel チーム Github Twitter
  • Worker Loader:Webpack のワーカーローダーモジュール。-- メンテナーWebpack チーム Github
  • Resolve URL Loader:`url()` ステートメント内の相対パスを解決します。-- メンテナーBen Holloway Github
  • Import Loader:Webpack のインポートローダーモジュール。-- メンテナーWebpack チーム Github
  • SourceMap Loader:モジュールから `sourceMappingURL` コメントを抽出します。-- メンテナーWebpack チーム Github
  • Combine Loader - ローダーの配列を単一のローダー文字列に変換します。-- メンテナーJames Friend Github
  • Icon Font Loader - SVG を CSS のフォントアイコンに変換します。-- メンテナーForrest R. Zhao Github
  • Icons Loader - SVG 依存関係からアイコンフォントを生成します。-- メンテナーMike Vercoelen Github
  • Modernizr Loader - Webpack でバンドルされた Modernizr ビルドを取得します。-- メンテナーPeerigon Devs Github
  • ngRouter Loader - Angular Router を使用した AOT 対応 NgModule の遅延ロード -- メンテナーShlomi Assaf Github Twitter
  • Lingui Loader - i18n ライブラリである jsLingui のメッセージカタログをオンザフライでコンパイルします -- メンテナーTomáš Ehrlich Github Twitter
  • Shell Loader - ソースファイルで任意のシェルスクリプトを実行します。-- メンテナーJo Sprague Github
  • EXIF Loader - ビルド時に JPG から EXIF および IPTC データを抽出します。-- メンテナーEmanuel Kluge Github Twitter
  • esbuild Loader - esbuild によって強化された、babel-loader、ts-loader、および Terser の超高速な代替手段です。-- メンテナーHiroki Osame Github Twitter

テスト

  • Karma Webpack:Webpack と Karma を使用します。-- メンテナーWebpack チーム Github
  • Istanbul Webpack プラグイン:パック全体に Istanbul インストルメンターを使用します。-- メンテナーHagai Cohen Github

統合ライブラリ

  • Dotenv Webpack:dotenv を介して環境変数をバンドルにコンパイルします。-- メンテナーMatthew Steele Github Twitter
  • Terse Webpack - プリセットを使用して、流暢なAPIで簡素化されたWebpack。-- メンテナーEric Clemmons Github Twitter
  • SystemJS Webpack - SystemJS の Webpack バンドリング。-- メンテナーGuy Bedford Github Twitter
  • Gulp Webpack Stream - ストリームインターフェースを介して webpack を実行します。-- メンテナーKyle Robinson Young Github Twitter
  • Webpack Blocks - 関数型機能ブロックを使用して webpack を設定します。-- メンテナーAndy Wermke Github Twitter
  • Webpacker - Ruby on Rails プロジェクトへの統合のための公式 webpack gem。-- メンテナーRails Github
  • WebpackAspnetMiddleware - ASP.NET 5 の開発ミドルウェア。-- メンテナーFrank Wallis Github
  • Consul Key/Value WebpackConsul KV ストア を介して環境変数をバンドルにコンパイルします。-- メンテナーMarlon Maxwel Github

Webpack プラグイン

  • DefinePlugin:コンパイル時に設定できるグローバル定数を生成します。-- メンテナーWebpack チーム Github
  • Compression Plugin:`Content-Encoding` で提供するアセットを準備します。-- メンテナーWebpack チーム Github
  • Offline Plugin:Webpack のオフラインプラグイン(ServiceWorker、AppCache)。-- メンテナーArthur Stolyar Github Twitter
  • Rewire Plugin:Webpackバンドルの依存性注入。 -- メインテナーJohannes Ewald Github Twitter
  • HTML Webpack Plugin:HTMLファイルの作成を簡素化します。 -- メインテナーJan Nicklas Github Twitter
  • Copy Webpack Plugin:Webpackでファイルとディレクトリをコピーします。 -- メインテナーLen Boyette Github Twitter
  • Split By Path:Split By Path Webpack Plugin。 -- メインテナーBohdan Tkachenko Github Twitter
  • SW Precache - バンドルをプリキャッシュするためのサービスワーカーを生成します。 -- メインテナーWill Farley Github
  • CoreJS Plugin - WebpackプラグインとしてのCore-JS。 -- メインテナーPatrickJS Github
  • Bundle Analyzer - バンドルをインタラクティブなツリーマップとして表現するユーティリティ。 -- メインテナーYuriy Grunin Github
  • Module Mapping - モジュールを異なるファイルにマッピングします。 -- メインテナーSpartez Team Github Twitter
  • Serverless Webpack - ラムダをバンドルするためのサーバーレスプラグイン。 -- メインテナーElastic Coders Github Twitter
  • Prerender SPA - SPA向けのフレームワーク非依存の静的サイト生成。 -- メインテナーChris Fritz Github Twitter
  • Static Site Generator Plugin - 最小限で、意見の少ない静的サイトジェネレーター。 -- メインテナーMark Dalgleish Github
  • SVG Sprite Plugin - SVGスプライトとアイコンのためのプラグイン。 -- メインテナーJeremy Tice (TodayTix) Github Twitter
  • Imagemin Webpack Plugin - Imageminで画像を圧縮します。 -- メインテナーGregory Benner Github Twitter
  • Prepack Webpack Plugin - prepackのためのWebpackプラグイン。 -- メインテナーGajus Kuizinas Github
  • Modules CDN Webpack Plugin - CDNからモジュールを動的にロードします。 -- メインテナーThomas Sileghem Github
  • Generate package.json Plugin - デプロイメントのpackage.json内の依存関係を、バンドルによって実際に使用されているものだけに制限します。 -- メインテナーPaul Myburgh Github
  • Progressive Web App Manifest - PWAマニフェストマネージャーおよびジェネレーター。 -- メインテナーArthur A. Bergamaschi Github
  • FileManager Webpack Plugin - Webpackビルドの前後にファイルとディレクトリをコピー、移動、削除します -- メインテナーGregory Nowakowski Github
  • Fork TS Checker Webpack Plugin - 別のプロセスでTypeScript型チェッカーを実行するWebpackプラグイン。 -- メインテナーTypeStrong Team Github
  • Duplicate Package Checker Webpack Plugin - バンドル内に同じパッケージの複数のバージョンが存在する場合に警告します -- メインテナーDarren Scerri Github
  • Circular Dependency Plugin - バンドル時に循環依存関係のあるモジュールを検出します -- メインテナーAaron Ackerman Github
  • webpack-inject-plugin - バンドルにコードを動的に注入するWebpackプラグイン。 -- メインテナーAdam Dierkens Github
  • Public Path Manipulation Plugin - 実行時に動的にロードされたリソースのpublicPathを制御します -- メインテナーAndrew Goldis Github
  • Build Notifier Plugin - ビルドエラーと警告に関するOSレベルの通知を表示します。 -- メインテナーRocco Cataldo Github
  • CSS Cleanup Webpack Plugin - 重複した未使用のCSSルールを削除するプラグイン -- メインテナーDominik Weber Github
  • Extension Reloader - ブラウザ拡張機能の開発中のホットリローディング -- メインテナーRubens P. G. Cavalcante Github Twitter
  • Htmls Webpack Plugin:Webpack用のシンプルで高速な複数HTML生成プラグイン。 -- メインテナーZack Young Github Twitter
  • Mini css extract plugin:軽量なCSS抽出プラグイン -- メインテナーWebpack Contrib Github
  • build-hash-webpack-plugin 各ビルドごとに、Webpackは2つのビルド出力が同じかどうかを知るためのインメモリハッシュを生成します。このプラグインは、記述されたビルドハッシュを別のJSONファイルに書き込みます。 -- メインテナーRéda Housni Alaoui Github Twitter
  • webpack-hook-plugin - Webpackビルドの前後に関わらず、任意のシェルコマンドを実行します -- メインテナーDavid Kwon Github
  • Dynamic Vendor Webpack Plugin - 動的な変数と特定のコード分割を使用してベンダーをインポートする方法を提供します。 -- メインテナー Lilian Saget-Lethias Github Twitter
  • Define Variable Webpack Plugin - 定義されたものを実際の変数に格納するためのDefinePluginの拡張機能。 -- メインテナー Lilian Saget-Lethias Github Twitter
  • Shell Script Webpack Plugin - コンパイラフック がトリガーされたときに、任意のシェルスクリプトを実行するためのプラグイン。 -- メインテナー Drew Loomer Github Twitter
  • Stylelint Webpack Plugin:Webpack用のStylelintプラグイン。 -- メインテナーRicardo Gobbo de Souza Github
  • ESLint Webpack Plugin:Webpack用のESLintプラグイン。 -- メインテナーRicardo Gobbo de Souza Github
  • Exclude Assets Webpack Plugin:パスRegExpパターンに基づいてWebpack出力からアセットを除外するためのプラグイン。 -- メインテナーKlayton Faria Github
  • Webpack Shell Plugin Next:Webpackビルドの前後に任意のシェルコマンドを実行できるプラグイン。 -- メインテナーKuzmin Pavel Github
  • Gettext Webpack Plugin:gettextを使用してローカライズをバンドルに埋め込みます。 -- メインテナーJuan Luis Paz Github
  • Node Polyfill Plugin:Node.jsコアモジュールをポリフィルします。 -- メインテナーRichie Bendall Github Twitter
  • Bytenode Plugin:bytenodeを使用してJavaScriptをバイトコードにコンパイルします。 -- メインテナーHerbert Treis Neto Github
  • Chrome Extension Archive Webpack Plugin Chrome拡張機能をChromeウェブストアに公開するためのアーカイブファイルを作成します -- メインテナーKeisukeYamashita Github
  • Layer-pack Webpack Plugin globによるファイルとディレクトリのインポート、継承可能なソースコード/npmパッケージを使用したモノレポアプリケーションの構築、およびWebpack設定の共有を可能にします。 -- メンテナー: Braun Nathanaël Github
  • webpack-typescript-directory-compile-plugin TypeScriptファイルのソースディレクトリとJavaScriptファイルの出力ディレクトリを設定します。ソースディレクトリ内の各TypeScriptファイルと新しく追加されたファイルは、個々のJavaScriptファイルにコンパイルされます。 -- メンテナー: Stephen Sigwart Github
  • CycloneDX Webpack Plugin: コンパイル時にWebpackバンドルからCycloneDXソフトウェア部品表(SBOM)を作成します。 -- メンテナー: OWASP CycloneDX Team Github
  • Transpile Webpack Plugin: 入力ファイルをバンドルせずに個別に出力ファイルにトランスパイルします。 -- メンテナー: Chungen Li Github Twitter
  • Manifest Extraction Plugin: Webpackのコンパイル後にアセットマニフェストを生成します。 -- メンテナー: Andrew Powell Github

Webpackツール

  • Webpack Dev Middleware: ライブバンドルを処理するミドルウェアです。 -- メンテナー: Webpack Team Github
  • Webpack Dev Server: Webpackアプリケーションを提供します。変更時にブラウザを更新します。 -- メンテナー: Webpack Team Github
  • Webpack Merge - Webpack用に設計されたマージユーティリティです。 -- メンテナー: Juho Vepsäläinen Github Twitter
  • NPM Install Webpack - Webpackで依存関係を自動的にインストールして保存します。 -- メンテナー: Eric Clemmons Github Twitter
  • Webpack Validator - Joiを使用してWebpack設定を検証します。 -- メンテナー: js-dxtools Team Github
  • Webpack Config Utils - Webpack設定の可読性を向上させるユーティリティです。 -- メンテナー: Kent C. Dodds Github Twitter
  • Angular2 Webpack Toolkit - Angular 2用のWebpackツールとヘルパーです。 -- メンテナー: AngularClass Github Twitter
  • Webpack Bundle Analyzer - バンドルをインタラクティブなツリーマップで表現します。 -- メンテナー: Yuriy Grunin Github Twitter
  • HJS Webpack: ホットローディングを使用したWebpackの設定のためのヘルパー/プリセットです。 -- メンテナー: Henrik Joreteg Github
  • Webpack Dashboard: Webpack dev server用のCLIダッシュボードです。 -- メンテナー: Formidable Labs Github
  • Neutrino: Webpackの機能とプリセットのシンプルさを組み合わせたものです。 -- メンテナー: Eli Perelman Github
  • Speed Measure Plugin - Webpackプラグインとローダーの速度を測定します。 -- メンテナー: Stephen Cook Github
  • Time Analytics Plugin - Webpackにおけるローダーとプラグインの時間を分析します。Speed Measure Pluginの後継です。 -- メンテナー: Song Gao Github
  • packtracker.io - 各コミットでWebpackバンドルの分析を行い、Webpack統計情報をすべてのプルリクエストに報告します。
  • BundleStats: Webpack統計情報(バンドルサイズ、アセット、モジュール、パッケージ)を分析し、異なるビルド間の結果を比較します。 -- メンテナー: Vio Github Twitter
  • Webpack Landing Generator: コンバージョン率の高いランディングページを簡単に作成する方法です。 -- メンテナー: Aliaksei Kuncevic Github Twitter
  • Webpack Dev Server Firewall: 不明なIPからのdevサーバーへのアクセスを防止します。 -- メンテナー: Igor Adamenko Github Twitter
  • RelativeCI: 各ビルドで詳細なバンドル分析を実行し、Webpackバンドルサイズ、アセット、モジュール、パッケージを監視します。Github

調査とトレーニング

記事

ビデオ

コース

書籍

  • SurviveJS - Webpack: Webpack初心者からマスターまでを導く無料の書籍。開発、本番、高度なトピックを網羅しています。

Webpackの例

コミュニティの例

Angular

フレームワーク非依存

React

Vue

  • Vuad - 高いスケーラビリティを持つ Vue ボイラープレート。logustra による。

その他

3 貢献者

snitin315licg9999evenstensberg