webpack如何全局加载第三方插件，类似jQuery？（转）

1. 直接引入难以引入插件

// 可以直接引入jquery,但没有全局的jQuery变量
import $ from 'jquery'
// 如果此时直接引入jquery 插件，则失败,如
import 'jquery-ui' // 错误，将会找不到jquery-ui注册的相关方法

2. ProvidePlugin难以引入插件

在webpack.config.js中添加插件ProvidePlugin

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
  ]
//  $函数会自动添加到当前模块的上下文，无需显示声明

这里注意不要在头部忘了添加

var webpack = require('webpack');

问题是依旧没有全局的$函数，所以导入插件依旧会失败，并且如果有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，可参照此方法
//  window.jQuery = window.$ = require('jquery')
为了调用方便，可在webpack配置文件中创建jquery-vendor.js的别名
alias: {
    jquery        : 'src/assets/jquery-vendor.js' //    将其指向jquery-vendor.js所在位置
}   
       resolve: {
        alias: {
            jquery: "jquery/src/jquery"//全局配置jquery
        }
    }

转自：https://github.com/Wscats/webpack/issues/6

转载于:https://www.jianshu.com/p/3b18c6c8f2d0