饥人谷技术博客

webpack如何提供jquery给所有模块使用

2017-05-08  本文已影响200人  普莱那
webpack可以通过变量注入的形式,为所有的模块增加插件,比如jquery,
//webpack.config.js
module.exports = {
    entry: '',
    output: {
    },
    plugins: [
      new webpack.ProvidePlugin({
          $: 'jquery'
      })
    ]
}

那么在打包文件中是如何实现的呢?

我把简化的文件放到下面

(function(module, exports, __webpack_require__) {

/* WEBPACK VAR INJECTION */(function($) {

    dealWith($) //用jquery编程吧

/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))

/***/ })

还记得我们之前介绍的27行代码读懂webpack吗?
它会把我们所有的模块都塞到一个匿名函数中,如下:

function(module,exports,__webpack_require__){}

那么如果想要为所有的模块都添加jquery库,只需要在匿名函数内,再套一个立即执行的匿名函数,这个匿名函数的参数$就是我们要引入的jquery,怎么引入呢?
还是我在27行代码读懂webpack里写的,引用webpackRequire函数即可,
(注:为了简便,我在27行代码中把______webpack_require__简化为了webpackRequire)
这个里面的代码实现是这样的:

(function($){//用$写的代码在这里面}.call(exports,__webpack_require__(1)))

这里面给$赋值的是______webpack_require__(1),说明,在模块数组中,
jquery是第二个,______webpack_require__(1)会return出jquery对象,然后赋值给$,然后你就可以在自己的模块中随便使用了!

上一篇 下一篇

猜你喜欢

热点阅读