Package Exports
- webpack-jquery-ui
- webpack-jquery-ui/css
- webpack-jquery-ui/dialog
- webpack-jquery-ui/draggable
- webpack-jquery-ui/droppable
- webpack-jquery-ui/effects
- webpack-jquery-ui/resizable
- webpack-jquery-ui/selectable
- webpack-jquery-ui/slider
- webpack-jquery-ui/sortable
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webpack-jquery-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Installation
This one package will let you use jquery and jquery-ui (v.1.12.1, for jQuery1.7+) in your project.
Use npm install webpack-jquery-ui instead of installing all dependencies and loaders separately.
Configuration
your webpack.config.js file
- set the following loaders and plugins that are necessary to support
jquery
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
index:'./src/index.js'
},
output: {
filename: 'bundled.js',
path: path.resolve(__dirname, 'dist'),
publicPath:'dist/'
},
module: {
rules: [
{
test: /\.css$/,
loaders: ["style-loader","css-loader"]
},
{
test: /\.(jpe?g|png|gif)$/i,
loader:"file-loader",
options:{
name:'[name].[ext]',
outputPath:'assets/images/'
//the images will be emited to dist/assets/images/ folder
}
}
]
},
plugins: [
/* Use the ProvidePlugin constructor to inject jquery implicit globals */
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery'",
"window.$": "jquery"
})
]
};your entry index.js file
To load all jquery-ui features with its basic css theme use:
require('webpack-jquery-ui');
require('webpack-jquery-ui/css'); //ommit, if you don't want to load basic css themeTo load only jquery-ui interactions or widgets or effects [list of features] use:
don't worry about jquery-ui core files. All neccessary dependencies are automatically loaded
require('webpack-jquery-ui/interactions');
require('webpack-jquery-ui/widgets');
require('webpack-jquery-ui/effects');To load only particular interactions [list of interactions] use:
don't worry about jquery-ui core files. All neccessary dependencies are automatically loaded with chosen interaction feature
require('webpack-jquery-ui/draggable');
require('webpack-jquery-ui/droppable');
require('webpack-jquery-ui/resizable');
require('webpack-jquery-ui/selectable');
require('webpack-jquery-ui/sortable');To load only particular widgets [list of widgets] use:
don't worry about jquery-ui core files. All neccessary dependencies are automatically loaded with chosen widget
require('webpack-jquery-ui/accordion');
require('webpack-jquery-ui/autocomplete');
require('webpack-jquery-ui/button');
require('webpack-jquery-ui/checkboxradio');
require('webpack-jquery-ui/controlgroup');
require('webpack-jquery-ui/datepicker');
require('webpack-jquery-ui/dialog');
require('webpack-jquery-ui/menu');
require('webpack-jquery-ui/progressbar');
require('webpack-jquery-ui/selectmenu');
require('webpack-jquery-ui/slider');
require('webpack-jquery-ui/spinner');
require('webpack-jquery-ui/tabs');
require('webpack-jquery-ui/tooltip');To load only particular effects [list of effects] use:
don't worry about jquery-ui core files. All neccessary dependencies are automatically loaded with chosen effect
require('webpack-jquery-ui/blind-effect');
require('webpack-jquery-ui/bounce-effect');
require('webpack-jquery-ui/clip-effect');
require('webpack-jquery-ui/drop-effect');
require('webpack-jquery-ui/explode-effect');
require('webpack-jquery-ui/fade-effect');
require('webpack-jquery-ui/fold-effect');
require('webpack-jquery-ui/highlight-effect');
require('webpack-jquery-ui/puff-effect');
require('webpack-jquery-ui/pulsate-effect');
require('webpack-jquery-ui/scale-effect');
require('webpack-jquery-ui/shake-effect');
require('webpack-jquery-ui/size-effect');
require('webpack-jquery-ui/slide-effect');
require('webpack-jquery-ui/transfer-effect');