webpack 引入jquery和第三方jquery插件
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插件的更多相关文章
- 基于 Webpack 引入 jquery 插件的笔记
如果都是基于 webpack(npm 上有包),那就非常顺利: import $ from 'jquery' import 'jquery-modal/jquery.modal.min.css' im ...
- Webpack+Vue如何导入Jquery和Jquery的第三方插件
创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...
- 如何在vue里面正确的引用 jquery 和 第三方插件
vue-cli webpack全局引入jquery(jq通过npm安装的并非本地文件) 1.首先在package.json里加入, dependencies:{ "jquery" ...
- DWZ(JUI) 教程 中如何整合第三方jQuery插件
Query插件一般是$(document).ready()中初始化 $(document).ready(function(){ // 文档就绪,初始化jQuery插件| }); // 或者或缩写形 ...
- vue+webpack 引入jquery
1 首先 cnpm install jquery:这时jquery已经安装成功,可以使用jquery,但是jquery不是全局的,需要在使用的组件中引入jquery,jquery的路径是jquery/ ...
- webpack引入全局jQuery
1.使用命令行npm install jquery来安装jQuery 2.在webpack.config.js文件里配置: plugins:[ new webpack.ProvidePlugin({ ...
- webpack引入jQuery
1. 本地文件引入 配置 const webpack=require('webpack'); module.exports={ resolve:{ alias:{ //绝对路径 jQuery:path ...
- 走进webpack(2)--第三方框架(类库)的引入及抽离
在当代的前端开发中,很少会用原生JS来开发页面,最基本的都会使用jQuery来节省我们开发的时间和效率,而angular,vue,react的出现更是为前端开发者带来了福音.那么这篇文章就说说如何用w ...
- 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...
随机推荐
- 2018 计算之道初赛第二场 阿里巴巴的手机代理商(困难)(反向可持久化Trie)
阿里巴巴的手机代理商(困难) 阿里巴巴的手机代理商正在研究 infra 输入法的新功能.他们需要分析单词频率以改进用户输入法的体验.于是需要你在系统内核里面写一个 API. API 有如下功能: 添加 ...
- 【树上主席树】BZOJ2588-Count on a tree
[题目大意] 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始为0,即第 ...
- 谈HTTPS中间人攻击与证书校验(一)
一.前言 随着安全的普及,https通信应用越发广泛,但是由于对https不熟悉导致开发人员频繁错误的使用https,例如最常见的是未校验https证书从而导致“中间人攻击”,并且由于修复方案也一直是 ...
- Ubuntu 无线驱动问题
最近一次更新系统后开机发现电脑只能连有线网络连不上无线网络.我平时都是连无线网络,没有买网线.所以查了下无线驱动相关问题资料,发现是由于更新系统造成无线网卡驱动莫名不见了.刚开始还以为是电脑将无线禁用 ...
- 基础知识(09) -- Spring 概述
Spring概述-------------------------------------------------------------------------主要内容: 1.Spring是什么 2 ...
- 解决IIS 不能下载.exe.config文件的方法
IIS允许下载".config"文件 Config文件是web的配置文件,默认是不允许下载的,就算在MIME中配置“application/octet-stream”,也是下载不了 ...
- 找不到原始安装光盘的佳能EOS Utility的下载和安装
佳能EOS Utility的下载和安装 佳能很有意思,在官方网站上提供的数码相机驱动程序,只是“升级版”,而不是原始安装版.如果我有安装光盘,还去网上下载驱动干吗?解决方案:1,从佳能官方网站上下 ...
- C++中经常使用到宏
_DOS_ 表示MS-DOS 16位系统平台 WIN32 表示Windows32位系统平台 WIN64 表示Windows64位系统平台 _WIN32_WCE 表 ...
- tyvj 2075 借教室 题解
P2075 [NOIP2012T5]借教室 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 noip2012-tg 描述 在大学期间,经常需要租借教室.大到院 ...
- OpenCV学习(5) Mat的基本操作(2)
本章我们学习一下Mat中的常用操作,因为在后面其它的教程中,我们经常要对图像进行各种处理,也要使用这些操作. 一. Mat的复制,就是从一个矩阵A,生成相关的另一个矩阵B. (1)使用赋值 ...