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
- The node_modules folder
- 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");