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对象,然后赋值给$,然后你就可以在自己的模块中随便使用了!
完
网友评论