1、引入jquery

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

index.html:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title><%= htmlWebpackPlugin.options.title %></title>
  7.     </head>
  8.  
  9.     <body>
  10.         <img src="src/img/ais.jpg"/>
  11.         <div id="app">
  12.  
  13.         </div>
  14.         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  15.     </body>
  16.  
  17. </html>

webpack.config.js进行配置：

  1. //将外部变量或者模块加载进来
  2.     externals : {
  3.         'jquery' : 'window.jQuery'
  4.     }

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

  1. // 我们不想这么用
  2. // const $ = window.jQuery
  3.  
  4. // 而是这么用
  5. const $ = require("jquery")
  6. $("#content").html("<h1>hello world</h1>")

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

2、jquery插件

  1. import  './css/common.css';
  2. import layer from './components/layer/layer.js';
  3. const App = function(){
  4.     var dom= document.getElementById('app');
  5.     var Layer = new layer();
  6.     dom.innerHTML = Layer.tpl;
  7. }
  8. //引入插件
  9. require('./js/jquery.tabSwitch.js');
  10. //使用插件
  11. $('.p').tabSwitch({tabName: '.aa',tabContent: 'ul'});
  12. 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. 【最小生成树】BZOJ1682[Usaco2005 Mar]-Out of Hay 干草危机

    ...最小生成树裸题,9月最后一天刷水刷水. #include<iostream> #include<cstdio> #include<algorithm> usi ...

  2. UI/GUI/UE/UX/ID/UED/UCD的区别

    简述: UI (User Interface):用户界面 UE (User Experience):用户体验 ID (Interaction design):交互设计 UID (User Interf ...

  3. python开发_linecache

    #从linecache的名称,我们可以知道该模块和cache(缓存)有关 #linecache现把文件读入到缓存中,在以后访问文件的时候,就不必要再从硬盘读取 #所以经常用于那些读取频率很高的文件还可 ...

  4. 2015 UESTC 搜索专题F题 Eight Puzzle 爆搜

    Eight Puzzle Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/61 ...

  5. md5加密，md5加盐加密和解密

    package com.java.test; import java.security.MessageDigest; import java.security.SecureRandom; import ...

  6. MySQL单表恢复方法

    正休息的时候一个电话将我的睡意完全打散,“开发童鞋写update SQL的时候忘了加where条件了”,相信每一个DBA同学听到这个消息的时候都有骂街的冲动吧.万幸只是单表写花了,而不是哪位大神在DB ...

  7. WICED -- Wireless Internet Connectivity for Embedded Devices

    Broadcom's Wireless Internet Connectivity for Embedded Devices (WICED™) platform (pronounced "w ...

  8. 关于npm run build 卡住不动的坑。。。

    起因:最近开发个项目使用的vue,有些功能需要生产版本放服务器上测试,这就出问题了..卡住了,不动了,还不报错 这是在vscode的终端里面,试了git hash,试了cmd , 试了powershe ...

  9. SharePoint_Config_Log file size

    Been doing a routine check of my servers, and noticed that our SharePoint server was lacking some fr ...

  10. Javascript：父类可以调用子类吗？

    问:父类可以调用子类吗? 答:可以,经典的模板方法模式就是用的这个特性.