webpack jquery plugin perfekt-tooltip

Question

Ich versuche, die perfekte Tooltip jquery Plugin (http://tborychowski.github.io/perfecttooltip/) mit Webpack zu laden. Ich habe erfolgreich andere jquery plugins wie: typed.js und Backstretch geladen, indem ich die Anweisungen hier (Managing jQuery plugin dependency in webpack) befolgt habe, aber sie scheinen nicht mit diesem spezifischen Plugin zu funktionieren.

Wenn ich das Bundle ausführen, sagt mir ein Fehler, dass die Tooltip-Funktion (vom Plugin exportiert) nicht definiert ist. Es scheint, dass das Plugin nicht von jquery geladen wird. Ich dachte, dass das Plugin versuchte, seine eigene Instanz von jquery zu laden, so dass ich einen Alias ​​verwendete:

alias: { 
    'jquery': require('jquery'), 
} 

Es löste das Problem nicht.

Meine aktuelle webpack Konfiguration:

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var CleanWebpackPlugin = require('clean-webpack-plugin'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var moment = require('moment'); 
var path = require('path'); 
var environment = process.env.APP_ENVIRONMENT || 'dev'; 

module.exports = { 

    entry: { 
    'app': './src/main.ts', 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts' 
    }, 
    devtool: 'source-map', 
    output: { 
    path: './dist', 
    filename: '[name].browser.' + moment().format('DDMMYYYYHHmm') + '.js' 
    }, 
    module: { 
    loaders: [ 
     { test: /\.component.ts$/, loader: 'ts!angular2-template' }, 
     { test: /\.ts$/, exclude: /\.component.ts$/, loader: 'ts' }, 
     { test: /\.html$/, loader: 'raw-loader' }, 
     { test: /\.css$/, include: path.resolve('src/app'), loader: 'raw-loader' }, 
     { 
     test: /\.css$/, exclude: path.resolve('src/app'), loader: ExtractTextPlugin.extract('style', 'css', { 
      fallbackLoader: "style-loader", 
      loader: "css-loader" 
     }) 
     }, 
     { test: /\.(png|jpe?g|gif|ico)$/, loader: 'file?name=fonts/[name].[ext]' }, 
     { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]" }, 
     { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]" }, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]" }, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file?name=fonts/[name].[ext]" }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]" }, 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.ts', '.html', '.css'] 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['vendor', 'polyfills'] 
    }), 
    new HtmlWebpackPlugin({ 
     template: './src/index.html' 
    }), 
    new webpack.DefinePlugin({ 
     app: { 
     environment: JSON.stringify(environment), 
     config: JSON.stringify(require('./profile/' + environment + ".profile.js")) 
     } 
    }), 
    new CleanWebpackPlugin(
     ['dist'] 
    ), 
    new CopyWebpackPlugin([ 
     { from: './src/images', to: 'images' } 
    ]), 
    new ExtractTextPlugin('[name].browser.css'), 
    new webpack.optimize.UglifyJsPlugin({ minimize: true }), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "window.jQuery": "jquery" 
    }) 
    ] 
}; 

Einsicht?

Answer 1

Schließlich gelang es mir, das Skript zu laden. Die im Paket enthaltene Datei package.json hat keine Haupteigenschaft. Webpack hat lediglich versucht, alle Dateien im Paket zu bündeln. Ich löste das, indem ich zwei spezifische Dateien benötigte: "js/jquery.tooltip.js" und "css/tooltip.css".