Webpack引入jquery及其插件的幾種方法

http://blog.csdn.net/yiifaa/article/details/51916560

 

. 直接引入[最佳方案]

直接引入的關鍵在於輸出的配置，這里以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所在位置 } 

可參考我的項目中的配置文件。