如果都是基于 webpack（npm 上有包），那就非常顺利：

import $ from 'jquery'
import 'jquery-modal/jquery.modal.min.css'
import 'jquery-modal/jquery.modal.min.js'

$('body').append('<form id="myModal" class="modal"></from>')
$('#myModal').html('this is a modal')
$('#myModal').modal()

这个时候的 html 文件引入打包结果即可：

<html>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

但是，有时候 jquery 可能只有一个 cdn 地址，可以这样处理。

将 jquery 和 jquery 插件都通过 cdn 引入，js 中继续写逻辑。

html 页面大概这样：

<html>
  <body>
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-modal/0.8.2/jquery.modal.min.js"></script>
    <link href="//cdn.bootcss.com/jquery-modal/0.8.2/jquery.modal.min.css" rel="stylesheet">
    <script src="bundle.js"></script>
  </body>
</html>

逻辑 js 文件：

$('body').append('<form id="myModal" class="modal"></from>')
$('#myModal').html('this is a modal')
$('#myModal').modal()

这样不太优雅，我们希望能不用外链的尽量不用外链，比如 jquery 希望能自己打包。

将 webpack 配置文件作如下处理：

entry: {
  'bundle': './js/index.js',
  'jquery': ["jquery"],
},
output: {
  filename: '[name].js'
},

即新增单独打包了 jquery.js 文件。

html 文件如下：

<html>
  <body>
    <script src="./jquery.js"></script>
    <script src="//cdn.bootcss.com/jquery-modal/0.8.2/jquery.modal.min.js"></script>
    <link href="//cdn.bootcss.com/jquery-modal/0.8.2/jquery.modal.min.css" rel="stylesheet">
    <script src="bundle.js"></script>
  </body>
</html>

报错：

jquery.modal.min.js:5 Uncaught ReferenceError: jQuery is not defined
bundle.js:9535 Uncaught ReferenceError: $ is not defined

jquery 插件和打包后的 bundle.js 都需要用到 $，但是找不到。很显然，我们需要将打包的 jquery 暴露给全局，expose-loader 可以做到。

module: {
  rules: [
    {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: 'jQuery'
      },{
        loader: 'expose-loader',
        options: '$'
      }]
    }
},

要注意的是，这个 loader 最好写在最前面。

另外，之前 有用 DllPlugin 分离库文件和其他文件，但是貌似用 DllPlugin 分离的库文件只能用于其他文件中，而不能用于外链引入的文件。比如我想用 webpack.dll.config.js 搭配 expose-loader 分离 jquery 文件，但是这个分离的文件并不能用于外链引入的 jquery 插件。

基于 Webpack 引入 jquery 插件的笔记的更多相关文章

  1. 在Web工程中引入Jquery插件报错解决方案

    在学习Jquery插件的时候,遇到一个问题就是新建web工程后在WebRoot下引入Jquery插件的时候报错,不知道为什么好纠结,但是项目能正常运行,后来找到解决方案,在这里给大家分享一下. 解决方 ...

  2. webpack 引入jquery和第三方jquery插件

    1.引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可. index.html: <!DOCTYPE html> <html> ...

  3. 基于 Webpack 引入公共库的几种方式

    以 jquery 和其插件 jquery-modal 为例,记录下引入公共库的几种方式. 为了方便,首先安装 jquery 和 jquery-modal: cnpm i jquery jquery-m ...

  4. vue引入jquery插件

    在vue中使用jquery插件 1.引入jquery 第一种方法:全局引入jquery 在webpack.base.conf.js,新增以下代码 plugins: [ new webpack.opti ...

  5. vue-cli webpack 引入jquery

    首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后install 在webpack.base.conf. ...

  6. Vue中引入jquery方法 vue-cli webpack 引入jquery

    在vue-cli 生成的工程中引入了jquery(模板用的webpack) 首先在package.json里的dependencies加入"jquery" : "^2.2 ...

  7. vue+webpack 引入jquery

    1 首先 cnpm install jquery:这时jquery已经安装成功,可以使用jquery,但是jquery不是全局的,需要在使用的组件中引入jquery,jquery的路径是jquery/ ...

  8. webpack引入jQuery

    1. 本地文件引入 配置 const webpack=require('webpack'); module.exports={ resolve:{ alias:{ //绝对路径 jQuery:path ...

  9. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

随机推荐

  1. flask框架-decorator装饰器

    调用包: from functools import wraps 装饰器其实就是一个函数:参数是一个函数,返回值是一个函数 1.装饰器使用是通过@符号,在函数的上面 2.装饰器中定义的函数,要使用*a ...

  2. 巧用CAS解决数据一致性问题

    缘起:在高并发的分布式环境下,对于数据的查询与修改容易引发一致性问题,本文将分享一种非常简单但有效的优化方法. 一.业务场景 业务场景为,购买商品的过程要对余额进行查询与修改,大致的业务流程如下: ( ...

  3. 使用Mkdocs构建你的项目文档

    使用Mkdocs构建你的项目文档 环境搭建 安装必需软件 作者是在windows下安装的,如果是linux或mac用户,官网有更详细的安装说明. windows 10 x64 当然还有广大的windo ...

  4. spring boot + druid + 封装JdbcTemplate

    本源码内容如下: spring boot项目 用的druid连接池 druid监控页面配置 数据操作用spring jdbctemplate 进一步封装spring jdbctemplate支持用对象 ...

  5. eclipse ctrl shift t 失效的恢复方法

    Window-->Perspective-->Customize Perspective 在弹出框选择: Action Set Avaliability ---将最右边的java Navi ...

  6. win10 系统输入法与 idea的 ctr+shift+f 快捷键冲突，解决办法

    我认为首先是输入法简繁热键的冲突,(当然也有人认为是qq的热键冲突,) 解决办法: 1.首先打开搜狗输入法的设置(当然有的可能不是搜狗输入法,其他的输入法设置步骤都是大同小异) 看到了吗,就是这个热键 ...

  7. springMVC上传错误StandardMultipartHttpServletRequest

    异常信息 java.lang.ClassCastException: org.springframework.security.web.servletapi.HttpServlet3RequestFa ...

  8. 《Spark大数据处理：技术、应用与性能优化》【PDF】

    内容简介 <Spark大数据处理:技术.应用与性能优化>根据最新技术版本,系统.全面.详细讲解Spark的各项功能使用.原理机制.技术细节.应用方法.性能优化,以及BDAS生态系统的相关技 ...

  9. ReactNative 基础学习

    安卓Back键的处理·基本+高级篇 http://bbs.reactnative.cn/topic/480/%E5%AE%89%E5%8D%93back%E9%94%AE%E7%9A%84%E5%A4 ...

  10. bzoj 4719: [Noip2016]天天爱跑步

    Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.?天天爱跑步?是一个养成类游戏,需要 玩家每天按时上线,完成打卡任务.这个游戏的地图可以看作一一 ...