如果都是基于 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. 【SqlServer系列】表达式(expression)

    1   概述 本篇这文章主要概述SqlServer表达式. 2   具体内容 2.1  使用范围 SQL Server(2008开始) :Azure SQL数据库:Azure  SQL数据仓库:并行数 ...

  2. Linux: curl

    [user@localhost ~]$ curl -h Usage: curl [options...] <url> Options: (H) means HTTP/HTTPS only, ...

  3. Chef 自动化运维：Chef 的安装

    安装准备 准备三台服务器,分别用作 Chef Server.Chef DK.Chef Client 的安装使用. 在三台服务器中,添加以下 hosts: vim /etc/hosts 192.168. ...

  4. docker学习笔记（一）

    docker是一种容器技术,现在火的一塌糊涂,最近公司打算用docker统一开发.测试.预上线.上线环境,所以花了时间研究一下. docker是一种容器技术,之前是基于LXC容器,现在已经改成基于li ...

  5. 微信小程序教学第四章第一节（含视频）：小程序中级实战教程：详情-页面制作

    详情 - 页面制作 本文配套视频地址: https://v.qq.com/x/page/o0555o20xjd.html 开始前请把 ch4-1 分支中的 code/ 目录导入微信开发工具 这一章节中 ...

  6. 初次使用Python脚本,proto协议文件转Lua代码

    使用IntelliJ IDEA编辑器编写Lua脚本的时候,安装一个插件 "EmmyLua" 可以对有代码提示功能 想把protoBuf协议文件转成Lua代码,然后给出代码提示 第一 ...

  7. APP闪退问题

    1.iOS-中app启动闪退的原因 2.iOS开发-闪退问题-解决之前上架的 App 在 iOS 9 会闪退问题 3.iOS-应用闪退总结 4.iOS开发-捕获程序崩溃日志 5.iOS开发-应用崩溃日 ...

  8. 以深圳.NET俱乐部名义 的技术交流会圆满成功

    2017年5月13日的深圳下着暴雨,一场以深圳.NET俱乐部名义的.NET技术交流会在微软Build 2017刚闭幕时在罗湖布吉路与翠山路交界处富基PARK国际6F举办,这次交流以微软Build 20 ...

  9. 查找 GPU 计算能力

    你能在这里找到你的 GPU 的计算能力: https://en.wikipedia.org/wiki/CUDA#Supported_GPUs

  10. sed使用范例

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/32 记录下sed编译器的常见使用方法. sed编辑器基于输入到命 ...