Webpack, jQuery, and loading qTip2

Question

我正在尝试require qTip2，但我遇到了问题：

require('jquery/src/sizzle/dist/sizzle.js');
require('jquery/src/jquery.js');
require('jquery-ui/jquery-ui.js');
require('qtip2/jquery.qtip.js');

$(document).ready(function() {
    $('.tooltip').qtip({
        attr: 'tooltip'
    });
});

当我加载捆绑包时，我得到：

Uncaught TypeError: $(...).qtip is not a function

这表示qTip2不会加载。

我的webpack配置是：

var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry: "./source/javascripts/main.js",
    output: {
        path: __dirname,
        filename: "build/bundle.js"
    },
    module: {
        loaders: [
            { test: /.css$/, loader: "style!css" },
            { test: /.jsx?$/, loader: "babel" },
            { test: /jquery/src/selector.js$/, loader: 'amd-define-factory-patcher-loader' },
        ]
    },
    resolve: {
        root: [path.join(__dirname, 'bower_components')]
    },
    plugins: [
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
        )
    ]
};

任何帮助都将是伟大的，谢谢！

Answer 1

在webconfig.js 中删除jQuery作为插件

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

然后像这个一样添加

window.$ = window.jQuery = require('jquery');
require('qtip2');

Answer 2

qtip2检查存在哪个模块加载程序的方式与试图模拟所有模块的webpack并不真正兼容。

imports-loader（npm i -D imports-loader）可能会有所帮助：

使用

import 'imports-loader?define=>false,jQuery=jquery!qtip2';

或

require('imports-loader?define=>false,jQuery=jquery!qtip2');

通过这种方式，qtip2文件将被加载，就好像AMD的define不存在，就好像jQuery全局（简单地映射到jquery模块评估的任何值）一样。