Webpack引入jquery及其插件的几种方法

2017-12-26 12:50 阅读 1,834 次 评论 0 条

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" }), ] // $函数会自动添加到当前模块的上下文,无需显示声明。

3. expose-loader[推荐使用]

引用时改为如下方式:
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及其插件的几种方法 | 猿笔记

发表评论


表情