# webpack-jquery-ui

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

Latest version **2.0.1** (published 2018-08-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-jquery-ui
pnpm add webpack-jquery-ui
yarn add webpack-jquery-ui
bun add webpack-jquery-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2018-08-02 |
| First published | 2017-06-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 18.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Paweł Rafałko |
| Maintainers | devrafalko |
| Keywords | webpack, jquery, jquery-ui, loaders |

## Links

- npm: https://www.npmjs.com/package/webpack-jquery-ui
- npm.io page: https://npm.io/package/webpack-jquery-ui

## Dependencies (5)

- [jquery](https://npm.io/package/jquery.md) ^3.3.1
- [jquery-ui](https://npm.io/package/jquery-ui.md) ^1.12.1
- [css-loader](https://npm.io/package/css-loader.md) ^1.0.0
- [file-loader](https://npm.io/package/file-loader.md) ^1.1.11
- [style-loader](https://npm.io/package/style-loader.md) ^0.21.0

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2018-08-02
- 2.0.0 — 2018-08-02
- 1.0.0 — 2017-06-13
- 0.1.4 — 2017-06-12
- 0.1.3 — 2017-06-12
- 0.1.2 — 2017-06-07
- 0.1.1 — 2017-06-06
- 0.1.0 — 2017-06-06

## 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\]](http://jqueryui.com/download/) 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\]](http://jqueryui.com/download/) 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\]](http://jqueryui.com/download/) 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\]](http://jqueryui.com/download/) 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

* [jQuery-UI docs](https://learn.jquery.com/jquery-ui/environments/bower/)
* [jQuery docs](http://jquery.com/download/)

### See also
* [styles-loader](https://www.npmjs.com/package/styles-loader)
* [webpack-icons-installer](https://www.npmjs.com/package/webpack-icons-installer)
* [webpack-karma-jasmine](https://www.npmjs.com/package/webpack-karma-jasmine)

---
_Source: https://npm.io/package/webpack-jquery-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._