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.

Importing

The file has dependencies that are not required.

imports-loader

This loader allows put some modules or arbitrary javascript onto a local variable of the file.

Examples:

file.js expect a global variable $ and you have a module jquery that should be used.

require("imports?$=jquery!./file.js")

file.js expect its configuration on a global variable xConfig and you want it do be {value:123}.

require("imports?xConfig=>{value:123}!./file.js")

Note: you can also configure the loaders in your configuration.

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"
})

Exporting

The file doesn't export its value.

exports-loader

This loader exports variables from inside the file.

Examples:

The file sets a variable in the global context with var XModule = ....

var XModule = require("exports?XModule!./file.js")

The file sets multiple variables in the global context with var XParser, XMinimizer.

var XModule = require("exports?Parser=XParser&Minimizer!./file.js"); XModule.Parser; XModule.Minimizer

The file sets a global variable with XModule = ....

require("imports?XModule=>undefined!exports?XModule!./file.js") (import to not leak to the global context)

The file sets a property on window window.XModule = ....

require("imports?window=>{}!exports?window.XModule!./file.js

Fixing broking module styles

Some files use a module style wrong. You may want to fix this by teaching webpack to not use this style.

Disable some module styles

Examples:

Broken AMD

require("imports?define=>false!./file.js")

Broken CommonJs

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$/,
			pathToRegExp(path.join(__dirname, "web_modules", "XModule2"))
		]
	}
}

Note: require, exports and module are still available as variables. exports and module are still usable, require is not usable. You may want to undefine them with the imports-loader.

script-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.

Exposing

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

expose-loader

This loader expose the exports to a module to the global context.

Example:

Expose file.js as XModule to the global context

require("expose?XModule!./file.js")