webpack 引用jquery插件_webpack jquery 插件 - CSDN
精华内容
参与话题
  • webpack4引入JQuery的两种方法

    万次阅读 2018-07-19 15:58:43
    非script标签的形式引入JQuery。 安装JQuery: 先安装加载器expose-loader,用于将插件暴露到全局中供其他模块使用: npm i expose-loader --save 安装JQuery: npm install jquery --save 以上两个模块也是...

    非script标签的形式引入JQuery。

    安装JQuery:

    先安装加载器expose-loader,用于将插件暴露到全局中供其他模块使用:

    npm i expose-loader --save

    安装JQuery:

    npm install jquery --save

    以上两个模块也是项目发布依赖的模块,因此安装参数选择--save。

    如何使用:

    1.第一种方法:在打包入口文件中直接require并用expose-loader暴露$到全局

    打包入口文件./src/index.js中引入JQuery:

    require("expose-loader?$!jquery");

    在html文件中引入测试是否全局可用./dist/index.html:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="main.js"></script>
    </head>
    
    <body>
        <script>
    	    $(function() {
    	        console.log($("body"));
    	    })
        </script>
    </body>
    
    </html>

    打包会自动在./dist目录下生成main.js

    浏览器打开./dist/index.html文件在控制台得到输出结果。

    注:如果在js文件中直接使用var $ = require("jquery");引入$无法暴露到全局,只能在当前js文件中使用。

    2.第二种方法:在打包入口文件引入JQuery,在配置文件中暴露到全局

    项目根目录创建配置文件./conf/webpack.dev.js:

    const path = require("path");
    module.exports = {
        mode: "development", //打包为开发模式
        entry: "./src/index", //入口文件
        output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径
            path: path.resolve(__dirname, "../dist"),
            filename: "main.js"
        },
        module: {
            rules: [
            	//暴露$和jQuery到全局
    	        {
    	            test: require.resolve('jquery'), //require.resolve 用来获取模块的绝对路径
    	            use: [{
    	                loader: 'expose-loader',
    	                options: 'jQuery'
    	            }, {
    	                loader: 'expose-loader',
    	                options: '$'
    	            }]
    	        }
            ]
        }
    }

    入口文件中./src/index.js引入jquery:

    require("jquery");

    测试文件./dist/html内容不变,打包:

     

    以上两种引入方式得到的效果一样,第一种引入方式更加简单

     

    展开全文
  • Webpack引入jquery及其插件的几种方法

    万次阅读 2017-05-24 18:07:57
    webpack中引入jquery很困难,引入jquery插件更困难,本文提供了多种方法在webpack项目中引入jquery及其相关插件。

    1. 直接引入[最佳方案]

    直接引入的关键在于输出的配置,这里以var为例,如下:

     output : {
          filename : '[name].js',
           //  devServer不可配置为绝对路径
           //publicPath: "http://localhost:8080/dist/",
           publicPath: "/dist/",
           path : build,
           //  umd包含了对amd、commonjs、var等多种规范的支持
           //   关键在于这里  
           libraryTarget : 'var'  
       },  
    //  其他配置略
     resolve: {
            //extensions: ['', '.js', '.es6', '.vue'],
            alias: {
                //  也可以不写
                jquery: 'jquery/dist/jquery.min.js',  
            }
    }

    这样,在编译代码时,webpack会自动将jquery打进代码,现在就可以引入代码了

    // 可以直接引入jquery
    import $ from 'jquery'
    // 因为是commonjs规范,所以会按顺序加载,引用成功,如果是output为amd,则必须在requirejs中配置shim,否则失败
    import 'jquery-ui' 

    2. ProvidePlugin[难以引入插件]

    在webpack中添加插件ProvidePlugin
    
    plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
        }),
      ]
    //  $函数会自动添加到当前模块的上下文,无需显示声明
    问题是依旧没有全局的$函数,所以导入插件依旧会失败,并且如果有eslint这样的preLoads,调用语句也难以通过语法校验(因为没有声明$就直接使用),仅这一点,对于我这样的代码处女座就难以接受。
    

    3. expose-loader[推荐使用]

    不需要任何其他的插件配合,只要将下面的代码添加到所有的loader之前
    
     {
        test: require.resolve('jquery'),
        loader: 'expose?jQuery!expose?$'
     }
    引用时改为如下方式
    
    import $ from 'expose?$!jquery'
    import 'jquery-ui' //插件可用   
     imports-loader、script-loader同样可达到此效果,配置与功能都非常相似,在此不一一说明。
    

    4. 包装jquery[推荐使用]

    此方法只依赖于自己,完全不需要任何其他插件与加载器,创建jquery的包装对象jquery-vendor.js
    
    import $ from 'jquery'
    window.$ = $
    window.jQuery = $
    export default $
    以后引用jquery时指向jquery-vendor.js
    
    import $ from '../assets/jquery-vendor.js'
    import 'jquery-ui'
    //  此时UI的方法全部可用,如果需要引用bootstrap,可参照此方法
    
    为了调用方便,可在webpack配置文件中创建jquery-vendor.js的别名
    
    
    alias: {
        jquery        : 'src/assets/jquery-vendor.js' //    将其指向jquery-vendor.js所在位置
    }   

    可参考我的项目中的配置文件。

    展开全文
  • webpack如何全局引入jquery插件?

    万次阅读 2017-02-03 13:36:25
    有点不可能,既然$算是webpack中的一个变量,那么你只能通过require的方式引入jQuery的第三方插件。第三方插件的结果只有两个,要不你就被打包引入你的js文件里,要不你就被引入vendor里。   结果一:打包进引入的...

    之前试过把jQuery打包进vendor,虽然$好用了,但是jQuery下的一系列插件就叫苦了。你想直接从html中引入jQuery的第三方插件?有点不可能,既然$算是webpack中的一个变量,那么你只能通过require的方式引入jQuery的第三方插件。第三方插件的结果只有两个,要不你就被打包引入你的js文件里,要不你就被引入vendor里。

     

    结果一:打包进引入的js文件里。如果多个js文件都引入了某个jQuery插件,那么就会出现很多重复的代码,冗余。

    结果二:打包进vendor里。如果都打包进一个vendor,那该文件得多大啊!自动手动配vendor?你知道哪个插件用到的次数多,哪个用到的少吗?麻烦

     

    后来我想,干脆第三方的插件我都不加入到webpack里,只有自己编写的代码用webpack来模块化就行了。第三方插件虽然都单独用了一个http请求,但它们改动不大,最终都会被浏览器缓存起来。

    于是,有以下几个需处理的事情:

    1、如何引入jQuery

    2、如何引入jQuery插件?

    3、如何引入不依赖jQuery的普通第三方插件?

     

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

    externals: {

    jquery: 'window.$'},

    使用则直接 require 进来,反正 webpack 也不会把它打包进来。

    var $= require('jquery');

    既然 $ 已经被设置为全局了,那么挂载在它下面的一系列 jQuery 插件就好办了,直接在 html 中引入。

    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>

    js 中引入 jquery 直接使用即可。

    var $=require(jquery);

    $(#leftNav).nail();

    最后就是打包普通的第三方插件了。有两种方案,一种是直接用webpack打包到引用到插件的js里去,

    这种不用多说,直接引入就行。另一种则是像jQuery一样设置为全局变量,同样的方式引入与使用。

    externals: {

    artTemplate: 'window.template'},

    webpack没有requirejs的那种引入第三方插件然后可以忽悠打包的功能。所以我对于第三方的插件的做法就是以前该怎么引入就怎么引入,在webpack中设置一个全局即可


    参考博客:

    http://www.cnblogs.com/handoing/p/5866830.html

    https://www.zhihu.com/question/33448231

    https://segmentfault.com/a/1190000006000118


    展开全文
  • webpack的ProvidePlugin配置

    万次阅读 2017-11-23 14:39:30
    webpack
    • webpack的插件使用方式:
    plugins: [
        new webpack.ProvidePlugin({}),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ]或者
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })

    前者是webpack内置的模块,后者不是webpack内置的模块,需要使用npm先进行安装再使用

    • ProvidePlugin,是webpack的内置模块
    • 使用ProvidePlugin加载的模块在使用时将不再需要import和require进行引入,使用语法:
    new ProvidePlugin({
        identifier: 'module1',
    })
    new ProvidePlugin({
        identifier: ['module1', 'property1'],
    })
    • 以jquery为例,用ProvidePlugin进行实例初始化后,jquery就会被自动加载并导入对应的node模块中
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
    然后我们可以在代码中直接使用,
    // in a module
    $('#item'); // <= just works
    jQuery('#item'); // <= just works
    // $ is automatically set to the exports of module "jquery"
    展开全文
  • 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack'...
  • 前言:由于对webpack的了解有限,所以在项目部署出现许多问题 一、webpack使用ES6语法,第三方js可以引入通过import,可以通过npm 配置到项目中或者直接下再加入项目js文件中 首先无论require还是import,都不是...
  • nuxt引入第三方插件的方法 比如jQuery

    万次阅读 2020-07-27 23:34:44
    第一种 npm install --save jquery ...先下下来 webpackjquery 然后 nuxt.config.js const webpack = require('webpack') module.exports = { build: { plugins: [ new webpack.ProvidePlugin({
  • vue 引用js文件方法

    千次阅读 2018-07-14 16:23:12
    vue 引入jQuery组件,在webpack.base.conf.js以插件方式引入, plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery&...
  • vue引入jquery报错 $ is not defined

    万次阅读 2018-06-11 20:33:01
    webpack.base.conf.js里加入 const webpack = require("webpack") 然后在module.exports的最后加入 plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack....
  • 请问webpack怎么引入第三方插件,不止jQuery,还有其他的一些插件,怎么引入呢,谢谢
  • 简单的webpack- 引入bootstrap

    万次阅读 2017-05-16 17:02:15
    如果可以使用webpack引入的bootstrap.css,就可以一个npm install完成项目的依赖,而不必手工的添加到html内。 本来以为在入口文件内加一行就行: import 'bootstrap/dist/css/bootstrap.css' 然后安装依赖...
  • webpack使用--loader和插件

    千次阅读 2017-03-24 00:14:10
    css-loader 处理css中路径引用等问题 style-loader 动态把样式写入html sass-loader scss编译器 less-loader less编译器 postcss-loader scss再处理
  • 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 ? 1 2 3 4 5 6 7 8 9 1
  • vue-cli3引入jquery的不同

    千次阅读 2018-12-11 11:11:17
    npm install jquery --save vue-cli3 配置; 在vue.config.js中 module.exports = { // 基本路径 baseUrl: './', configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $:&quot;...
  • 1、安装webpack和loader 为什么要安装webpack? 因为我们要用到webpack的 expose-loader。当然,webpack的打包功能我们也要用到。 mkdir demo-webpack &amp;&amp; cd demo-webpack npm init cnpm install ...
  • vue-cli3.0如何引入jquery

    千次阅读 2019-12-17 11:42:51
    const webpack = require('webpack') const path = require('path'); function resolve(dir) { return path.join(__dirname, dir) } module.exports = { baseUrl: './', devServer: { host: '...
  • webpack引入jquery

    千次阅读 2017-07-05 09:33:41
    使用vue-cli 生成了一个demo,如果想在vue中使用jquery时,一种办法是直接在index.html中引入jquery,但是这种方法并不是我想使用的,当然还有很多种方法引入jquerywebpack中,但我个人比较喜欢下面的的一种方法。...
  • webpack.base.conf.jswebpack.dev.conf.jswebpack.prod.conf.js 一开始在接触webpack 的时候,简直痛不欲生,现在回头看,做个注释, 当然参考了很多文章。这是一个关于vue 开发的webpack 架构会列举出来 webpack...
  • webpack使用第三方库的时候 ...可以使用 webpack.providePlugin插件 有三种方式 1. 直接在html文件中引入 cdn上的文件 (注意这种方式是引用网络上的 CDN 文件) &lt;script src="...
1 2 3 4 5 ... 20
收藏数 4,792
精华内容 1,916
关键字:

webpack 引用jquery插件