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打进代码,现在就可以引入代码了

// 可以直接引入jqueryimport $ 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所在位置}

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