Webpack jquery插件完美的工具提示
webpack jquery plugin perfect-tooltip
我试图加载完美的工具提示jquery插件(http://tborychowski.github.io/perfecttooltip/)使用webpack。我成功地加载了其他jquery插件,如:typed.js和backstretch按照这里提供的说明(在webpack中管理jquery插件依赖),但他们似乎不与特定的插件工作。
当我运行bundle时,一个错误告诉我没有定义工具提示函数(由插件导出)。似乎插件不是由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"
})
]
};
见解吗?
最终我成功加载了这个脚本。包。包中提供的json文件没有main属性,Webpack只是试图捆绑包中的所有文件。我通过要求两个特定的文件来解决这个问题:"js/jquery.tooltip.js"answers"css/tooltip.css"。
相关文章:
- d3.js Chord图的动态工具提示
- Graphiti中是否有任何工具提示功能
- "工具提示"jQuery插件坏了
- 单元格的工具提示或标题不显示超过2000个字符
- d3.js用按钮更新条形图工具提示
- 使Intro.js工具提示响应
- 画布中绘制的矩形区域的弹出工具提示
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- 禁用NVD3 multiBarHorizontalChart中0值的工具提示
- 如何更改已显示的工具提示
- 如何访问高图表工具提示中的任何特定数据
- 如何在jQuery点击函数中添加并显示引导工具提示
- 我可以't使用jQuery更改工具提示引导程序的位置
- 语义UI中格式化的工具提示
- 柱状图上的Highcharts工具提示
- 引导工具提示用法,在搜索字段中
- 将工具提示添加到d3散点图中
- Highcharts工具提示不显示corrosconding文本值,而是显示'未定义'
- Webpack jquery插件完美的工具提示
- 通过javascript制作的工具提示并不完美