Webpack ProvidePlugin vs externals?
amd, backbone.js, requirejs, webpack
Solution
It's both possible: You can include libraries with a `<script>` (i. e. to use a library from a CDN) or include them into the generated bundle.
If you load it via `<script>` tag, you can use the `externals` option to allow to write `require(...)` in your modules.
Example with library from 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");
Example with library included in bundle:
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
Problem
I'm exploring the idea of using Webpack with Backbone.js. I've followed the quick start guide and has a general idea of how Webpack works, but I'm unclear on how to load dependency library like jquery / backbone / underscore. Should they be loaded externally with `<script>` or is this something Webpack can handle like RequireJS's shim? According to the webpack doc: shimming modules, `ProvidePlugin` and `externals` seem to be related to this (so is `bundle!` loader somewhere) but I cannot figure out when to use which. Thanks