Webpack、jQuery和加载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模块评估的任何值)。