1、引入jquery

jQuery 直接在 html 中引入，然后在 webpack 中把它配置为全局即可。

index.html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title><%= htmlWebpackPlugin.options.title %></title>

    </head>

    <body>

        <img src="src/img/ais.jpg"/>

        <div id="app">

        </div>

        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    </body>

</html>

webpack.config.js进行配置：

//将外部变量或者模块加载进来

    externals : {

        'jquery' : 'window.jQuery'

    }

有时我们希望我们通过script引入的库，如用CDN的方式引入的jquery，我们在使用时，依旧用require的方式来使用，但是却不希望webpack将它又编译进文件中。

// 我们不想这么用

// const $ = window.jQuery

// 而是这么用

const $ = require("jquery")

$("#content").html("<h1>hello world</h1>")

https://www.cnblogs.com/samli15999/p/7047968.html

2、jquery插件

import  './css/common.css';

import layer from './components/layer/layer.js';

const App = function(){

    var dom= document.getElementById('app');

    var Layer = new layer();

    dom.innerHTML = Layer.tpl;

}

//引入插件

require('./js/jquery.tabSwitch.js');

//使用插件

$('.p').tabSwitch({tabName: '.aa',tabContent: 'ul'});

new App()

如果要全局引用jQuery，不管Query插件有没有支持模块化，用externals就对了。

webpack 引入jquery和第三方jquery插件的更多相关文章

  1. 基于 Webpack 引入 jquery 插件的笔记

    如果都是基于 webpack(npm 上有包),那就非常顺利: import $ from 'jquery' import 'jquery-modal/jquery.modal.min.css' im ...

  2. Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...

  3. 如何在vue里面正确的引用 jquery 和 第三方插件

    vue-cli webpack全局引入jquery(jq通过npm安装的并非本地文件) 1.首先在package.json里加入, dependencies:{ "jquery" ...

  4. DWZ(JUI) 教程 中如何整合第三方jQuery插件

    Query插件一般是$(document).ready()中初始化 $(document).ready(function(){  // 文档就绪,初始化jQuery插件| });  // 或者或缩写形 ...

  5. vue+webpack 引入jquery

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

  6. webpack引入全局jQuery

    1.使用命令行npm install jquery来安装jQuery 2.在webpack.config.js文件里配置: plugins:[ new webpack.ProvidePlugin({ ...

  7. webpack引入jQuery

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

  8. 走进webpack（2）--第三方框架（类库）的引入及抽离

    在当代的前端开发中,很少会用原生JS来开发页面,最基本的都会使用jQuery来节省我们开发的时间和效率,而angular,vue,react的出现更是为前端开发者带来了福音.那么这篇文章就说说如何用w ...

  9. 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...

随机推荐

  1. 【最小表示法】BZOJ1398-寻找朋友

    [题目大意] 判断两个字符串是否循环同构. [思路] 我一开始的做法是直接同时在两个字符串上求最小表示法,只有部分测试点能过,理由未知,以后再来思考. 现在做法:分别求出两个字符串的最小表示法,再比较 ...

  2. 【静态主席树】POJ2104-K-th Number

    求区间第k大.裸线段树. 莫队版本:☆ #include<iostream> #include<cstdio> #include<cstring> #include ...

  3. 事务有哪些特性？spring的事务管理有几种方式实现，如何实现？

    特性:1.原子性:一个事务中所有对数据库的操作是一个不可分割的操作序列,要么全做要么全不做 2.一致性:数据不会因为事务的执行而遭到破坏 3.隔离性:一个事物的执行,不受其他事务的干扰,即并发执行的事 ...

  4. 最短路：我的理解--Dijkstra算法

    最短路径:Dijkstra算法 用来计算从一个点到其他所有点的最短路径的算法,是一种单源最短路径算法.也就是说,只能计算起点只有一个的情况. Dijkstra的时间复杂度是O (N2),它不能处理存在 ...

  5. CentOS 6.9/7通过yum安装指定版本的Redis

    一.安装 // 安装依赖 # wget http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm && ...

  6. OpenVPN配置网桥模式的一些理解

    说明: 1.网桥的作用是将所有的网卡都能直连主机所在的路由器,可以把它当做一个独立的PC. 2.OpenVPN设置成网桥之后,IP设置成主机所在的IP网段,这样客户端连接进来之后就是所在主机所在的网络 ...

  7. 树莓派（Debian）系统设置了静态IP之后还会获取动态IP的问题解决（scope global secondary eth0）

    解决方法: 1.配置好静态IP在/etc/network/interface 2.关闭dhcp服务(不知道这个服务是干嘛的,明明是客户端还需要这个) sudo systemctl stop dhcpc ...

  8. ruby 状态转移

    0. 引言       昨天遇到一个问题,就是关于对象状态转移的问题,我姑且这样命名吧.简要描述一下就是:对于一个人,他有进食,帮助他人,恋爱等功能,但是这些功能是有先后顺序的,对于刚出生的人,他要先 ...

  9. 把Jar文件转成exe安装文件

    1.你要清楚的目标文件是32位还是64位的,如果生成的是32位,你就要使用32位的jre,如果生成的是64位,就要使用64位的jre. 图 1 在圆圈位置进行32bit或64bit的选择.因为我要创建 ...

  10. 最大的Redis集群：新浪Redis集群揭秘

    前言 Tape is Dead,Disk is Tape,Flash is Disk,RAM Locality is King.       — Jim Gray Redis不是比较成熟的Memcac ...