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 configure them in your webpack config instead. Read [[Using loaders]] for more details how to do this.
导入
Useful when a file has dependencies that are not imported via require()
.
imports-loader
This loader allows you to 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 to be {value:123}
.
require("imports?xConfig=>{value:123}!./file.js")
file.js
expect that this
is the global context.
require("imports?this=>window!./file.js")
or require("imports?this=>global!./file.js")
[[plugin | list of plugins]] 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",
"window.jQuery": "jquery"
})
导出
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, Minimizer
.
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
修复损坏模块样式
Some files use a module style wrong. You may want to fix this by teaching webpack to not use this style.
停用一些模块样式
示例:
Broken AMD
require("imports?define=>false!./file.js")
Broken CommonJs
require("imports?require=>false!./file.js")
配置 选项 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
.
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.
暴露
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)
expose-loader
This loader exposes the exports to a module to the global context.
Example:
Expose file.js
as XModule
to the global context
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.