-
Notifications
You must be signed in to change notification settings - Fork 127
shimming modules
Not all JS files can be used directly with webpack. The file might be in an unsupported module format, or not even in any module format.
Webpack provides several loaders to make these files work with webpack.
The examples on this use require
to keep them short. You will usually want to configure them in your webpack config. See Using loaders.
If a file has dependencies that are not imported via require()
, you will need to use one of these loaders.
The imports loader allows you to use modules that depend on specific global variables.
This is useful for third-party modules that rely on global variables like $
or this
being the window
object.
The imports loader can add the necessary require('whatever') calls, so those modules work with webpack.
Examples:
require("imports?$=jquery!./file.js")
require("imports?xConfig=>{value:123}!./file.js")
require("imports?this=>window!./file.js")
or require("imports?this=>global!./file.js")
plugin ProvidePlugin
This plugin makes a module available as a variable in every module. The module is required only if you use the variable.
Example: Make $
and jQuery
available in every module without writing require("jquery")
.
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
The file doesn't export its value.
This loader exports variables from inside the file.
Examples:
var XModule = require("exports?XModule!./file.js")
var XModule = require("exports?Parser=XParser&Minimizer!./file.js"); XModule.Parser; XModule.Minimizer
require("imports?XModule=>undefined!exports?XModule!./file.js")
(import to not leak to the global context)
require("imports?window=>{}!exports?window.XModule!./file.js")
Some files use a module style wrong. You may want to fix this by teaching webpack to not use this style.
Examples:
require("imports?define=>false!./file.js")
require("imports?require=>false!./file.js")
configuration option module.noParse
This disables parsing by webpack. Therefore you cannot use dependencies. This may be useful for prepackaged libraries.
Example:
{
module: {
noParse: [
/XModule[\\\/]file\.js$/,
path.join(__dirname, "web_modules", "XModule2")
]
}
}
Note:
exports
andmodule
are still available and usable. You may want to undefine them with theimports-loader
.
This loader evaluates code in the global context, just like you would add the code into a script tag. In this mode every normal library should work. require
, module
, etc. are undefined.
Note: The file is added as string to the bundle. It is not minimized by webpack, so use a minimized version. There is also no dev tool support for libraries added by this loader.
There are cases where you want a module to export itself to the global context.
Don't do this unless you really need this. (Better use the ProvidePlugin)
This loader exposes the exports to a module to the global context.
Example:
require("expose?XModule!./file.js")
Another Example:
require('expose?$!expose?jQuery!jquery');
...
$(document).ready(function() {
console.log("hey");
})
By making jQuery available as a global namespace in our file containing jQuery code or the root file, you can use jQuery everywhere in your project. This works very well if you plan to implement Bootstrap(boot up the project) in your Webpack project.
Note: Using too much global name-spacing will make your app less efficient. If you are planning to use a lot of global namespaces, consider implementing something like Babel runtime to your project.
In rare cases when you have to apply more than one technique, you need to use the correct order of loaders:
inlined: expose!imports!exports
, configuration: expose before imports before exports.
webpack 👍