webpack-jquery-ui

Install jquery-ui and all necessary webpack loaders ready to use

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
webpack-jquery-ui
2.0.14 years ago5 years agoMinified + gzip package size for webpack-jquery-ui in KB

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
```javascript 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: ```javascript require('webpack-jquery-ui'); require('webpack-jquery-ui/css'); //ommit, if you don't want to load basic css theme ``` To 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
```javascript 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
```javascript 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
```javascript 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
```javascript 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'); ```

Links

See also