webpackでjqueryプラグインを設定する

Question

jqueryプラグインmultiselectをwebpackと連携させるように設定しようとしています。

しかし、私は、私は別名で

alias: { 
      'multiSelect': Path.join(__dirname, '../public/plugins/jquery-multi-select/js/jquery.multi-select.js') 
      } 

webpack.config.js

var Path = require('path') 
var ProvidePlugin = require('webpack/lib/ProvidePlugin') 

module.exports = { 
    module: { 
     loaders: [ 
       { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' } 
      ] 
    }, 
    resolve: { 
     alias: { 
     'multiSelect': Path.join(__dirname, '../public/plugins/jquery-multi-select/js/jquery.multi-select.js') 
     } 
    }, 
    entry: Path.join(__dirname, '../public/Entry.js'), 
    output: { 
     path: Path.join(__dirname, '../public'), 
     filename: 'bundle.js' 
    }, 
    plugins: [ 
     new ProvidePlugin({ 
      jQuery: 'jquery', 
      $: 'jquery', 
      jquery: 'jquery' 
     }) 
    ], 
} 

Entry.js

01を、それが含まれている

$(...).multiSelect is not a function 

を取得しています

!function ($) { 
    ... 
}(window.jQuery); 

だからあなたはこのようなあなたのEntry.jsファイルを変更しようとすることができます：

var multiSelect = require('multiSelect') 
$('#my-select').multiSelect() // $(...).multiSelect is not a function 

Answer 1

複数選択プラグインは、生命維持使用

window.jQuery = jquery; 
var multiSelect = require('multiSelect'); 
$('#my-select').multiSelect(); 

か、変更することができ、あなたのwebpack.config.js：

new ProvidePlugin({ 
    jQuery: 'jquery', 
    $: 'jquery', 
    jquery: 'jquery', 
    'window.jQuery': 'jquery' 
})