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所在位置
}   

可參考我的專案中的配置檔案。