1. Imports Loader

imports loader允许您使用依赖于特定全局变量的模块。

这对于依赖全局变量的第三方模块非常有用，比如$或者this是window对象。imports loader可以添加必要的require('whatever')调用，所以这些模块和webpack一起工作。

1.1. 安装

npm install imports-loader -save-dev

1.2. 用法

有了这个文件 example.js

$("img").doSomeAwesomeJqueryPluginStuff();

然后，您可以通过配置 imports-loader 来将$变量注入到模块中:

require("imports-loader?$=jquery!./example.js");

这就简单地把 var $ = require("jquery"); 前置插入到example.js.

1.2.1. 语法

查询值	等于
`angular`	`var angular = require("angular");`
`$=jquery`	`var $ = require("jquery");`
`define=>false`	`var define = false;`
`config=>{size:50}`	`var config = {size:50};`
`this=>window`	`(function () { ... }).call(window);`

1.2.2. 多个值

多个值用逗号分隔,:

require("imports-loader?$=jquery,angular,config=>{size:50}!./file.js");

1.2.3. webpack.config.js

和往常一样，在webpack.config.js中配置更好。

// ./webpack.config.js

module.exports = {
    ...
    module: {
        rules: [
            {
                test: require.resolve("some-module"),
                use: "imports-loader?this=>window"
            }
        ]
    }
};

1.3. 典型用例

1.3.1. jQuery插件

imports-loader?$=jquery

1.3.2. 自定的 Angular 模块

imports-loader?angular

1.3.3. 禁用 AMD

有很多模块在使用 CommonJS 前会进行 define 函数的检查。自从 webpack 两种格式都可以使用后，在这种场景下默认使用了 AMD 可能会造成某些问题（如果接口的实现比较古怪）。

你可以像下面这样轻松的禁用 AMD

imports-loader?define=>false

关于兼容性问题的更多提示，可以参考官方的文档 Shimming Modules。

1.4. 维护者

Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin

imports-loader