Simple webpack config for webix

Webix JS
#1

Dear Webix Team,

I have to make my program running without the Internet connection.

In general it is advised to load webix.js and css via html tags. That is perfectly fine.

So the simplest would be to simply download webix and use it locally in runtime. But on the other hand I would like to be able to manage webix dep via npm.

So what I mean I need a simple pattern to configure webpack. Basically what is needed - is to copy webix.js and webix.css into say libs folder and final index.html will include it from there. In the dev mode webpack should resolve deps accordingly.

For my surprise I could not find an easy way to do that. Could you please advise on that?

Thanks in advance.

Regards,

Igor

#2

Hello @Ingvord,

You have a few possible options when it comes to bundling Webix source files with the help of a Webpack:

1\. First option entails using the script loader for webix.js. Unfortunately, the script loader has been deprecated as of late (with the release of Webpack 5), so you might not want to consider this option if you are planning on using newer version of the bundler.

If you are still planning on using this option, you will need to add the following lines to webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\\@xbs\\/webix-pro\\/webix\\.js$/,
                use: [ 'script-loader' ]
            }
        ]
    }
}

It will use the script-loader for webix.js, which will load it as a global script, meaning it will be accessible across the entire app (essentially, this is the same as including tag with webix.js inside of index.html).

2\. An alternative solution would be to use the ProvidePlugin.

You will need to add the following config to thewebpack.config.js file:

plugins: [
	new webpack.ProvidePlugin({
		// SET PATH TO WEBIX HERE
		webix: path.join(__dirname, "node_modules", "@xbs", "webix-pro")
	}),
      ...
]

This will make Webix available for all includes.

#3

Hi @Dzmitry ,

Thank you very much for the response.

Solution 2 seems like a better alternative. However it seems it just provides global webix access to the app, which is already better. But what to do with css in this case?