如果都是基于 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. 基于FPGA的图像显示

    基于FPGA的图像显示 作者:lee神 这几天一直在调试FPGA的图像显示系统,今天终于成功,图像不在闪烁,也不再边框缺失. 基于FPGA的图像处理的第一课应该是基于FPGA的图像显示,只有图像正常显 ...

  2. JAVA入门[9]-mybatis多表关联查询

    概要 本节要实现的是多表关联查询的简单demo.场景是根据id查询某商品分类信息,并展示该分类下的商品列表. 一.Mysql测试数据 新建表Category(商品分类)和Product(商品),并插入 ...

  3. OS X第三方类库管理工具cocoapods入门

    一.简介 什么是cocoapods?--是OS X和iOS下一个第三方类库管理工具.通过cocoapods,可以为项目添加"Pods"依赖库,并且管理其版本. cocoapods好 ...

  4. SLAM入门之视觉里程计(2)：相机模型（内参数，外参数）

    相机成像的过程实际是将真实的三维空间中的三维点映射到成像平面(二维空间)过程,可以简单的使用小孔成像模型来描述该过程,以了解成像过程中三维空间到二位图像空间的变换过程. 本文包含两部分内容,首先介绍小 ...

  5. 【java】计算一段代码执行时长java.lang.System类里的public static long currentTimeMillis()方法

    public class Test_currentTimeMillis { public static void main(String[] args) { long start=System.cur ...

  6. iOS知识点集合--更改(2)

    3.nsmutablearray *a 如果直接赋值 a = @[@"d",@""]; 这个时候a 是不可变的 字典也是如此 2.如果接口调用错误的话 打印re ...

  7. 通过EntityFramework来操作MySQL数据库

    自己首次用到了EF,为了利人利己,故将自己今天学的记录下来. 这个项目要用到的工具是VS2015.MySQL5.7.12 . 首先我们先建一个解决方案,里面建两个项目分别是Silentdoer.Mai ...

  8. ABP前端使用阿里云angular2 UI框架NG-ZORRO分享

    一.前言 前段时间写博客分享和介绍了阿里云的UI框架NG-ZORRO(博客请查看:http://www.cnblogs.com/donaldtdz/p/7892960.html),结合近段时间对.Ne ...

  9. 【算法】论平衡二叉树（AVL）的正确种植方法

    参考资料 <算法(java)>                           — — Robert Sedgewick, Kevin Wayne <数据结构>       ...

  10. 浅谈传统语音通信和APP语音通信音频软件开发之不同点

    本人在传统的语音通信公司做过手机和IP电话上的语音软件开发,也在移动互联网公司做过APP上的语音软件开发.现在带实时语音通信功能的APP有好多,主流的有微信语音.QQ电话.钉钉等,当然也包括我开发过的 ...