Webpack神坑之imports-loader

      先给个官网地址，小盆友们可以自己看看。

      https://www.webpackjs.com/loaders/imports-loader/

      imports-loader是个很奇葩的东西，在webpack的架构下，假如说你写了一个js文件，然后你想写一些用jquery的代码，那么你就需要去import一个jquery的lib，而imports-loader的作用就是让你免了这个过程，让你不需要在js文件里再写这么一句话。

      (引自官网)

      假设你有 example.js 这个文件

$("img").doSomeAwesomeJqueryPluginStuff();

      然后你可以像下面这样通过配置 imports-loader 插入 $ 变量到模块中：

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

      这将简单的把 var $ = require("jquery"); 前置插入到 example.js 中。

      (引用结束)

      接下来重点来了，这个loader的原理很建单，说白了就是把你要import的js文件，根据你的url，前后加上一些代码，可以看一下imports-loader的源码：

// 根据require的url生成一个object对象：
// URL : $=jquery&this=>window
// 生成：{"$" : "jquery", "this" : ">window"}
Object.keys(query).forEach(function(name) {
    var value;
    if(typeof query[name] == "string" && query[name].substr(0, 1) == ">") {
        /* ...省略部分 */
    } else {
        /* ...省略部分 */
        value = "require(" + JSON.stringify(mod) + ")";
    }
    if(name === "this") {
        /* ...省略部分 */
    } else if(name.indexOf(".") !== -1) {
        /* ...省略部分 */
    } else {
        // 生成一句代码，例如：var $ = require("jquery");
        // 然后将这行代码添加到数组中
        imports.push("var " + name + " = " + value + ";");
    }
});
// 数组转变成字符串，加在文件头
var prefix = HEADER + imports.join("\n") + "\n\n";
var postfix = "\n" + postfixes.join("\n");
/* ...省略部分 */
// 这个content就是你要导入的js文件里面的内容
return prefix + content + postfix;

      imports-loader最直接的应用场景，就是你想直接import一个开放的js文件，而不是通过npm去加载这个类库（会有一些类库不支持npm的方式），然后这个里面用到的jquery，就可以试用该方式导入。

     在使用imports-loader的最重要的一个前提条件，因为他实现的原理是require相关的类库，所以切记：

在package.json里一定把相应的类库写进devDependencies里。

  "devDependencies": {
    /*...*/
    "jquery": "^3.3.1"
  }