DevExtreme jQuery/JS - Create a Custom Bundle
To create a custom bundle using the DevExtreme Bundler tool, you need Webpack and the DevExtreme package installed globally.
- npm install -g webpack
- npm install -g devextreme
Create the DevExtreme configuration file in your project folder.
- devextreme-bundler-init <bundle_name>
Here,
After the file is created, you can edit it and leave only modules and exports you need.
The following command produces a minified bundle.
- devextreme-bundler <bundle_name|file_name>
Then, link the bundle script file to your HTML page.
- <script type="text/javascript" src="dx.custom.js" charset="utf-8"></script>
Link themes to your application.
- <!--Link Themes-->
- <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/css/dx.common.css">
- <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/css/dx.ios7.default.css">
The example below demonstrates how to create an application with a single button using the modules and shows the reduced configuration file.
index.html
- <!DOCTYPE html>
- <html>
- <head>
- <title>DevExtreme with a custom bundle example</title>
- <meta charset="utf-8">
- <!--External Scripts-->
- <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.0.min.js"></script>
- <!--DevExtreme Bundle-->
- <script type="text/javascript" src="dx.custom.js" charset="utf-8"></script>
- <!--Themes-->
- <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/css/dx.common.css">
- <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/css/dx.ios7.default.css">
- </head>
- <body>
- <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
- <div id="myButton"></div>
- </div>
- <script>
- $("#myButton").dxButton({
- text: "Say 'Hello world'",
- onClick: function() {
- DevExpress.ui.dialog.alert('Hello world!', '', false);
- }
- });
- </script>
- </body>
- </html>
dx.custom.config.js
- /* Core (dx.module-core.js) */
- var DevExpress = require("devextreme/bundles/modules/core");
- /* UI core (dx.module-core.js) */
- var ui = DevExpress.ui = require("devextreme/bundles/modules/ui");
- ui.dialog = require("devextreme/ui/dialog");
- /* Base widgets (dx.module-widgets-base.js) */
- ui.dxButton = require("devextreme/ui/button");
If you have technical questions, please create a support ticket in the DevExpress Support Center.