浮声新志

webpack全局加载第三方插件jQuery类库

发表于 | 分类于 |

介绍

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。

用webpack最大的问题就是不需要再关注依赖顺序了

【webpack 官网】

【webpack 入门文档】

第一种方法（直接引入）：

1
2
3
4
5
6
7
var webpack = require('webpack');
// 你要引入jquery并交由webpack打包 只需要这样使用
var $ = require('jquery');
// webpack会自动去node_modules 目录中查找资源
// console.log("一切就是如此简单愉快！")

第二种方法（webpack插件引入）：

主要依靠 webpack 中 ProvidePlugin 来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
    resolve: {
        root: [],
        alias: {
            'jquery': path.resolve(rootDir, './lib/jquery.min.js'); 
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery'
        }),
    ]
};

第三种方法（expose-loader 配置）：

1
2
3
4
{
    test: require.resolve('jquery'),
    loader: 'expose?jQuery!expose?$'
 }

引用方式：

1
2
import $ from 'expose?$!jquery'
import 'jquery-ui' //插件可用

第四种方法（封装jQuery）：

  1. 生成 jquery-vendor.js

    1
    2
    3
    4
    5
    6
    var $ = require('jquery');
    // es6
    import $ from 'jquery';
    window.$ = $;
    window.jQuery = $;
    exports default $

  2. 类库引用jquery时指向jquery-vendor.js

    1
    2
    import $ from '${webroot}/jquery-vendor.js'
    import 'jquery-ui'

  3. 调用方便，可在webpack配置文件中创建jquery-vendor.js的别名

    1
    2
    3
    alias:{
        'jquery':'${webroot}/jquery-vendor.js';
    }