WebPACKのカスタムローダー、およびカスタムプラグイン

1.包装カスタム機能ローダー

（形式は、単純で使用するための構成規則のオプションの利用可能なWebPACKの、強調ローダ-utilsのとloaderUitls.getOptions  ）

これは単純な代替パス・ローダーで、ローダー他の特定の要件は、コンテンツを自分で書くことができます

 

 

 2。

コンパイラ和コンパイル

// MyPlugin.jsは
機能MyPlugin（オプション）{
   この .OPTIONS = オプションは、
} 
MyPlugin.prototype.apply = 関数（コンパイラ）{
   // ... 
  compiler.plugin（ ' コンパイル '、関数（コンパイル）{ 
    にconsole.log（ 'コンパイラは、新しいコンパイルを開始しています...' ）; 
    コンパイル。プラグイン（ 'HTML-のWebPACK-プラグインする前に、HTML処理'、関数（htmlPluginData、コールバック）{ 
      htmlPluginData.html + = 'マジックフッター' 、
      コールバック（NULL、htmlPluginData）。
    }）; 
  }）; 
}。
module.exportsは = MyPlugin。

イベント：他のプラグインを可能にするために、次のイベントを実行しては、HTMLを変更します。非同期イベント：HTML-のWebPACK - プラグインの前に-HTML-世代のhtml-のWebPACK - プラグインの前に-HTML-処理のhtml-のWebPACK - プラグインのalter-資産タグをHTML -webpack・プラグイン後のHTML処理のHTMLのWebPACK・プラグインの後に放出する同期イベント：HTML-のWebPACK-プラグインALTERチャンク

HtmlWebpackPlugin嵌合プラグ、追加のHTMLタグIDにリンク

私-plugin.js

関数MyPlugin（オプション）{
   この .OPTIONS = オプション。
} 
MyPlugin.prototype.apply = 関数（コンパイラ）{ 
  compiler.plugin（ 'コンパイル'、関数（コンパイル）{ 
    （compilation.plugin、 'HTML-のWebPACK-プラグインALTER資産タグ' 機能（htmlPluginData、コールバック）{
       もし（htmlPluginData.head && htmlPluginData.head.length）{ 
        htmlPluginData.head.forEach（項目 => {
           場合（item.attributes）{ 
             HREFせ = item.attributes.href。
             item.attributes.id = href.substring（href.indexOf（ 'CSS /'）+ 4、href.indexOf（ '' ））; 
          } 
        }）。
      } 
      コールバック（NULL 、htmlPluginData）。
    }）; 
  }）; 
}。
module.exportsは = MyPlugin。

その後に設定さwebpack.config.js：

（」私の-plugin.js ./ MyPluginは=必要とせ）
 // ... 
プラグイン：[
   新しい MyPlugin（{オプション： '' }）
]