jquery-ui and webpack, how to manage it into module?

For some reason jquery-ui didn't play nice with webpack. I had to require jquery-ui-bundle instead.

npm i -S jquery-ui-bundle

and then require it after jquery e.g.

require('jquery');
require('jquery-ui-bundle');

jquery-ui-dist and jquery-ui-bundle do not seem to be maintained by the jquery-ui team. After jquery-ui v1.12 Its possible to use the official jquery-ui package from npm with webpack.

Update jquery-ui to 1.12 by updating package.json and npm install.

Then you can require each widget like this.

require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/draggable");

If you have used require("jquery-ui") before you need to replace it with separate imports for each widget. I think the new way is better because it will bundle only the code for the widget we need to use.

See documentation on using the 1.12 official npm package.

youre in luck I did this just that yesterday, it's rather easy.

npm install --save jquery jquery-ui

Make sure that you have jquery aliased to resolve with the plugin in the webpack.config.js

...
plugins: [
    new webpack.ProvidePlugin({
      "$":"jquery",
      "jQuery":"jquery",
      "window.jQuery":"jquery"
    }),
...

Then include two aliases in the webpack.config.js

1. The node_modules folder
2. The jquery-ui folder

``````

resolve : {
    alias: {
      // bind version of jquery-ui
      "jquery-ui": "jquery-ui/jquery-ui.js",      
      // bind to modules;
      modules: path.join(__dirname, "node_modules"),

Make sure that jquery gets loaded first in your app startup file.

var $ = require("jquery"),
        require("jquery-ui");

If you need to use a theme configure the css-loader and the file-loader. Don't forget to npm install those loaders.

module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      { test: /\.(jpe?g|png|gif)$/i, loader:"file" },

And use in your app startup file.

require("modules/jquery-ui/themes/black-tie/jquery-ui.css");
require("modules/jquery-ui/themes/black-tie/jquery-ui.theme.css");