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')($);

好了，這樣問題就解決了。