webpack项目导入jquery插件的方法

背景

在webpak项目中由于需要用到jquery的一个插件，但是在使用过程中出现了一些问题在这里坐一下记录。

webpack 的 imports-loader 插件

imports-loader 允许你的模块依赖特定的全局变量。这个对第三方模块来说特别有用，比如说 $ 或者 this 这些window对象。这个，imports loader 可以添加必要的require(‘whatever’)调用，这样这些模块就可以跟webpack一起使用。好了，知道这个插件的作用，我们先来安装上这个插件

npm install --save-dev imports-loader

方法一 通过在require中添加特定的链接符号

可以这样引用。

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

但是这样引用的话，感觉不够优雅 ，代码中一大堆的loaders相关的信息。
那么我们可以把这些信息配置到webpak.config.js中来解决这一问题

方法二 通过webpack.config.js来优雅加载

webpack 的配置,具体路径module.exports->module->rules->

{test: /jquery-mousewheel/, loader: "imports-loader?define=>false&this=>window"},

然后就可以在代码中这样引用了

require('jquery-mousewheel')($);

好了，这样问题就解决了。