Question

我正在尝试配置jquery插件multiselect以使用webpack。

但我正在

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

我已将其包含在别名

中

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

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

Answer 1

Multiselect插件使用IIFE：

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

因此，您可以尝试更改Entry.js文件，如下所示：

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

或者您可以更改webpack.config.js：

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

使用webpack配置jquery插件

1 个答案: