Webpack ProvidePlugin与外部？

两者都有：您可以在库中包含一个<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");

---

The ProvidePlugin can map modules to (free) variables. So you could define: "Every time I use the (free) variable xyz inside a module you (webpack) should set xyz to require("abc")."

Example without ProvidePlugin:

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

Example with ProvidePlugin:

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

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

---

Summary:

• Library from CDN: Use <script> tag and externals option
• Library from filesystem: Include the library in the bundle. (Maybe modify resolve options to find the library)
• externals: Make global vars available as module
• ProvidePlugin: Make modules available as free variables inside modules