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. [APIO2007]动物园 --- 状压DP

    [APIO2007]动物园 题目描述 新建的圆形动物园是亚太地区的骄傲.圆形动物园坐落于太平洋的一个小岛上,包含一大圈围栏,每个围栏里有一种动物. 如下图所示: 你是动物园的公共主管.你要做的是,让每 ...

  2. 【主席树】BZOJ3524-[Poi2014]Couriers

    [题目大意] 给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r-l+1)/2.如果存在,输出这个数,否则输出0. [思路 ...

  3. C#双面打印解决方法(打印word\excel\图片)

    最近需要按顺序打印word.excel.图片,其中有的需要单面打印,有的双面.网上查了很多方法.主要集中在几个方式解决 1.word的print和excel的printout里设置单双面 2.prin ...

  4. 斐波那契数列(python实现）

    描述 一个斐波那契序列,F(0) = 0, F(1) = 1, F(n) = F(n-1) + F(n-2) (n>=2),根据n的值,计算斐波那契数F(n),其中0≤n≤1000. 输入 输入 ...

  5. codeforces 148E Aragorn's Story 背包DP

    Aragorn's Story Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset/probl ...

  6. 常用 iOS 开源库和第三方组件

    1.通过CocoaPods安装 项目名称 项目信息 AFNetworking 网络请求组件 FMDB 本地数据库组件 SDWebImage 多个缩略图缓存组件 UICKeyChainStore 存放用 ...

  7. OpenVPN Server端配置文件详细说明（转）

    本文将介绍如何配置OpenVPN服务器端的配置文件.在Windows系统中,该配置文件一般叫做server.ovpn:在Linux/BSD系统中,该配置文件一般叫做server.conf.虽然配置文件 ...

  8. windows系统上安装与使用Android NDK r8d(二)

    四.    在eclipse中集成c/c++开发环境    1. 装Eclipse的C/C++环境插件:CDT,这里选择在线安装.          首先登录http://www.eclipse.or ...

  9. Java：泛型在编译时会被檫除，Eclipse 如何给出智能提示？

    背景 Java 的泛型是一种语法糖,编译时会被“檫除”,参考文章:http://docs.oracle.com/javase/tutorial/java/generics/,如果没有源代码,Eclip ...

  10. Netty Channel 接口名词理解

    1.Channel channel 是负责数据读,写的对象,有点类似于老的io里面的stream.它和stream的区别,channel是双向的,既可以write 也可以read,而stream要分o ...