zoukankan      html  css  js  c++  java
  • 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就对了。

  • 相关阅读:
    spring中各个模块的作用
    《Spring实战》学习笔记-第四章:面向切面的Spring
    《Spring实战》学习笔记-第四章:面向切面的Spring
    Centos7下永久修改mysql5.6最大连接数
    Prefix-List
    Route-Map
    PBR Lab2
    Lab PBR
    ISIS超载位解决流量黑洞
    ISIS TLV
  • 原文地址:https://www.cnblogs.com/mengfangui/p/7552471.html
Copyright © 2011-2022 走看看