[解決済み] Webpack ProvidePluginとexternalsの違い？

質問

私は ウェブパック と Backbone.js .

クイックスタートガイドに従ったので、Webpackの動作は大体わかっていますが、jquery / backbone / underscoreなどの依存ライブラリをどのように読み込むのかが不明です。

これらは外部で <script> で読み込むべきなのか、それとも RequireJS の shim のように Webpack が処理できるものなのでしょうか？

によると webpack doc: モジュールのシム化 , ProvidePlugin と externals はこれに関連しているようです（これは bundle! ローダーもどこかにあります）しかし、いつどれを使うのかがわかりません。

ありがとうございます。

どのように解決するのですか？

両方可能です。ライブラリをインクルードするには <script> (でライブラリをインクルードする（つまり、CDN からライブラリを使用する）か、生成されたバンドルにインクルードします。

経由で読み込んだ場合 <script> タグを使用すると externals オプションを使うことで require(...) と書くことができます。

CDNからのライブラリを使用した例。

<script src="https://code.jquery.com/jquery-git2.min.js"></script>

// the artifial module "jquery" exports the global var "jQuery"
externals: { jquery: "jQuery" }

// inside any module
var $ = require("jquery");

バンドルに含まれるライブラリでの例。

copy `jquery-git2.min.js` to your local filesystem

// make "jquery" resolve to your local copy of the library
// i. e. through the resolve.alias option
resolve: { alias: { jquery: "/path/to/jquery-git2.min.js" } }

// inside any module
var $ = require("jquery");

は ProvidePlugin はモジュールを(フリー)変数にマップすることができます。ですから、次のように定義することができます: "私が (自由な) 変数を使うたびに xyz を使用するたびに、あなた (webpack) はモジュール内に xyz を require("abc") ."

のない例 ProvidePlugin :

// You need to require underscore before you can use it
var _ = require("underscore");
_.size(...);

の例 ProvidePlugin :

plugins: [
  new webpack.ProvidePlugin({
    "_": "underscore"
  }) 
]

// If you use "_", underscore is automatically required
_.size(...)

要約です。

• CDNからのライブラリ：使用 <script> タグと externals オプション
• ファイルシステムからライブラリを取得します。ライブラリをバンドルに含めます。 (たぶん resolve オプションを修正して、ライブラリを見つけることができます)
• externals : グローバルバーをモジュールとして利用できるようにする
• ProvidePlugin : モジュールをモジュール内の自由変数として利用できるようにする