webpack jquery插件perfect-tooltip

-1

我正在嘗試使用webpack加載完美工具提示jquery插件（http://tborychowski.github.io/perfecttooltip/）。我按照這裏提供的說明（Managing jQuery plugin dependency in webpack）成功加載了其他jquery插件，如typed.js和backstretch，但它們似乎不適用於該特定插件。webpack jquery插件perfect-tooltip

當我運行該包時，一個錯誤告訴我工具提示函數（由插件導出）未定義。看來這個插件沒有被jquery加載。我以爲插件試圖加載自己的jQuery實例，所以我用別名：

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

它沒有解決問題。

我目前的WebPack配置：

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" 
    }) 
    ] 
};

任何見解？

來源

2016-10-12 Giovanni Di Santo

最終我設法加載了該腳本。包中提供的package.json文件沒有主屬性，Webpack只是試圖打包包中的所有文件。我解決了這個問題，需要兩個特定的文件：「js/jquery.tooltip.js」和「css/tooltip.css」。

來源

2016-10-12 15:08:56

webpack jquery插件perfect-tooltip

回答

相關問題