美文网首页饥人谷技术博客
webpack如何提供jquery给所有模块使用

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

作者: 普莱那 | 来源:发表于2017-05-08 12:49 被阅读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对象,然后赋值给$,然后你就可以在自己的模块中随便使用了!

相关文章

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

    那么在打包文件中是如何实现的呢? 我把简化的文件放到下面 还记得我们之前介绍的27行代码读懂webpack吗?它会...

  • Vue项目引入jQuery

    安装jQuery模块:npm install jquery -d编辑build/webpack.base.conf...

  • webpack4.0 resolve的使用

    webpack在启动后会从配置的入口模块触发找出所有依赖的模块,Resolve配置webpack如何寻找模块对应的...

  • webpack 4 入门指南 系列六(模块热加载篇)

    本教程使用基于开发教程的代码示例 模块热加载(HMR)是webpack提供的最有用的特性之一。它允许所有类型的模块...

  • webpack的使用

    什么是webpack 简单来说webpack就是一种模块加载器兼打包工具。侧重于模块加载 webpack如何使用 ...

  • React 和他的朋友们 Webpack(1)

    webpack 在 webpack 中,将所有类型文件都视为模块,然后使用不同模块加载器进行加载不同类型文件。 构...

  • webpack 解析resolve(20)

    获取全套webpack 4.x教程,请访问瓦力博客 resolve能设置模块如何被解析。webpack 提供合理的...

  • javascript 识别银行卡类型

    如何使用 模块化 方式(暂未同步npm 模块) script src 方式 源码 依赖jquery banktyp...

  • webpack打包backbone

    通过webpack模块化拆分backbone项目。思路是把Backbone,underscore和jQuery引入...

  • webpack 是什么

    1.1. 什么是webpack webpack是nodejs的一个模块,该模块提供了构建前端开发环境(打包,转码,...

网友评论

    本文标题:webpack如何提供jquery给所有模块使用

    本文链接:https://www.haomeiwen.com/subject/bxemtxtx.html