-
Notifications
You must be signed in to change notification settings - Fork 127
shimming modules
In some cases webpack cannot parse some file, because it has a unsupported module format or isn't even in a module format. Therefore you have many options to convert the file into a module.
On this page all examples with loaders are inlined into require
calls. This is just for demonstration. You may want to configurate them in your configuration. Read Using loaders for more details how to do this.
The file has dependencies that are not required.
This loader allows put some modules or arbitrary javascript onto a local variable of the file.
Examples:
require("imports?$=jquery!./file.js")
require("imports?xConfig=>{value:123}!./file.js")
require("imports?this=>window")
or require("imports?this=>global")
plugin ProvidePlugin
This plugin makes a module available as 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"
})
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:
require
,exports
andmodule
are still available as variables.exports
andmodule
are still usable,require
is not 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 if you don't really need this
This loader expose the exports to a module to the global context.
Example:
require("expose?XModule!./file.js")
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 👍