# Documentation v8.0.38

Preview Downloads Purchase
Webpack is a module bundler primarily for JavaScript, but it can transform front-end assets like HTML, CSS, and images if the corresponding plugins are included. Webpack takes modules with dependencies and generates static assets representing those modules. More information can be found in the official Webpack site.

# Webpack Quick Start

1. Download the latest theme source from the Marketplace.
2. Download and install Node.js from Nodejs. The suggested version to install is `14.16.x LTS`.
3. Start a command prompt window or terminal and change directory to `[unpacked path]/theme/tools/`:

       cd theme/tools/

4. Install the latest NPM:

       npm install --global npm@latest

5. Install Yarn via the NPM:

       npm install --global yarn

   Don't forget to run `yarn upgrade`after every Metronic update is released in order to receive newly added or updated 3rd-party plugins.
   Use `npm cache clean --force`command, if the installation had failed at any step. Retry again from beginning once it's done.
6. Install the Metronic dependencies in `[unpacked path]/theme/tools/`folder.

       yarn

   We recommend using `Yarn`instead `NPM`for the Metronic dependencies setup. `Yarn`supports nested dependencies resolutions in `package.json`where spesific version of sub dependacies are required such as `resolutions: { "gulp-dart-sass/sass": "1.32.13" }`.
7. Run the build taks to build the theme assets default build using Webpack:. The below command will compile all the assets(sass, js, media) to `dist/assets/`folder: State which demo to compile and append at the end of the command. Eg. `--demo1`
   Note on the `package.json`file. This step is very important for Webpack in Metronic template. The default `package.json`works for Gulp. To make it work for Webpack, you have to modify `tools/package.json`and remove `"type": "module"`. Otherwise, it will cause compilation error when running the next command.

       npm run build --demo1

8. Start the localhost server:

       gulp localhost

   Keep the console open. Open this link to run `http://localhost:8080/demo1/dist/` . It will take a few seconds for the build to finish. To stop a localhost environment, press `Ctrl+C`.
   If you are getting this error `ReferenceError: require is not defined`. Check on the "Note on the `package.json`file" above.

# Build Options

The main webpack build config file is located in `tools/webpack.config.js`and you can fully customize the build settings to meet your project requirements.
This command use to start the Webpack real-time watcher. This task watches the `SASS`JavaScriptfiles and automatically recompile whenever the source files are changed.

    npm run watch

Webpack use webpack-dev-serverto quickly develop an application. Use below command to start the Webpack in localhost.

    npm run localhost --demo1

Use `--rtl`parameter to generate RTL version of required `CSS`files.

    npm run build --rtl --demo1

Use `--prod`to build assets for production with minified `CSS`and `JavaScript`files.

    npm run build --prod --demo1

Use `--css`to build only `CSS`files.

    npm run build --css --demo1

Use `--js`to build only `JavaScript`files.

    npm run build --js --demo1

# Adding New Plugins

The new plugins from npm can be added into existing main `tools/webpack/plugins/plugins.js`bundle or in separate bundle. To create a separate bundle, check on these existing samples in `tools/webpack/plugins/custom/*`
Follow the below steps to add a new plugin into the main bundle or as a separate bundle:

1. Get the new plugin package from yarn site Yarn Package Manager's siteand learn about install the new plugin using yarn referring to Yarn Usage Docs.
2. This is the example command to add a new npm plugin. After running this command, the new plugin name will be added into `packages.json`

       yarn add [package name]

3. This is the example command to add a new npm plugin. After running this command, the new plugin name will be added into `packages.json`

       yarn add [package name]

4. Use below sample code to include the new plugin. The Webpack will first look for the plugins in the `node_modules`folder.

       require("[package]");
       require("path/to/dist/package.js");

5. For some case, the included plugin that need to be initialized within your custom codes by pass it to the global window. Then can be used globally within your custom codes. For example as below. This is to fix the browser to recognize the plugin when need to use it as `new Dropzone()`.

       window.Dropzone = require("dropzone/dist/min/dropzone.min.js");

6. To include CSS file from the plugin, use the below code:

       require("path/to/dist/package.css");

# Configuration

Below is a file structure inside the default Metronic's Webpack config. The Webpack config is located in `tools/webpack`folder.

Path | Description
--- | ---
`plugins` | 3rd party vendor's plugins from `node_modules`.
`custom` | This folder contains separate vendor's bundles.
`plugins.js` | This is the global vendor includes which required for all pages.
`plugins.scss` | This is the global vendor includes which required for all pages.
`custom` | The theme's core plugins and scripts.

# Integration

These are the general steps for Webpack integration with other frameworks. Take a look on the example of Webpack config file `theme/tools/webpack.config.js`for more details.
The information below does not completely works as it is. A basic knowledge of Webpack is required for custom integration with other frameworks' Webpack.
Copy the folder of `tools/webpack/`into your application. This folder contains the asset paths and plugin JS definition. For example, this file is for plugin CSS `tools/webpack/plugins/plugins.scss`

    // tools/webpack/plugins/plugins.scss
    @import "~apexcharts/dist/apexcharts.css";
    @import "~@/src/plugins/formvalidation/dist/css/formValidation.css";
    @import "~bootstrap-daterangepicker/daterangepicker.css";
    // ....

This is the example for JS plugins `tools/webpack/plugins/plugins.js`.

    // tools/webpack/plugins/plugins.js
    window.jQuery = window.$ = require('jquery');
    window.bootstrap = require('bootstrap');
    window.Popper = require('@popperjs/core');
    // ....

Get and copy the function to grab all the required asset files from this file.

    function getEntryFiles() {
        const entries = {
            // 3rd party plugins css/js
            'plugins/global/plugins.bundle': ['./webpack/plugins/plugins.js', './webpack/plugins/plugins.scss'],
            // Theme css/js
            'css/style.bundle': ['./' + path.relative('./', srcPath) + '/sass/style.scss', './' + path.relative('./', srcPath) + '/sass/plugins.scss'],
            'js/scripts.bundle': './webpack/scripts.' + demo + '.js',
        };

        // Custom 3rd party plugins
        (glob.sync('./webpack/{plugins,js}/custom/**/*.+(js)') || []).forEach(file => {
            let loc = file.replace('webpack/', '').replace('./', '');
            loc = loc.replace('.js', '.bundle');
            entries[loc] = file;
        });

        // Custom JS files from src folder
        (glob.sync(path.relative('./', srcPath) + '/js/custom/**/!(_)*.js') || []).forEach(file => {
            entries[file.replace(/.*js\/(.*?)\.js$/ig, 'js/$1')] = './' + file;
        });

        return entries;
    }

`srcPath`is an absolute path to your `src`folder. Eg. `C:\wamp64\www\keenthemes\_releases\metronic_html_v8.0.38\theme\demo1\src`

These are the example output entry file paths to be passed into the Webpack `entry`configuration. The array `key`is the destination output and the `value`is the source file paths.

    {
      'plugins/global/plugins.bundle': [ './webpack/plugins/plugins.js', './webpack/plugins/plugins.scss' ],
      'css/style.bundle': './..\demo1\src/sass/style.scss',
      'js/scripts.bundle': './webpack/scripts.demo1.js',
      'js/custom/modals/create-project.bundle': './webpack/js/custom/modals/create-project.js',
      'js/custom/modals/offer-a-deal.bundle': './webpack/js/custom/modals/offer-a-deal.js',
      'plugins/custom/ckeditor/ckeditor-balloon-block.bundle': './webpack/plugins/custom/ckeditor/ckeditor-balloon-block.js',
      'plugins/custom/ckeditor/ckeditor-balloon.bundle': './webpack/plugins/custom/ckeditor/ckeditor-balloon.js',
      // ....
    }

Call the function above, to get the list of asset files. It should pass into the `entry`option in the `webpack.config.js`along with other Webpack configurations.

`resolve.alias`is required for alias symbol `@`to point to the demo `src`folder. It's been used in the `theme/tools/webpack/`.

Read more information about the `resolve.alias`on the Webpack documentation https://webpack.js.org/configuration/resolve/#resolvealias

    {
        // ....
        entry: getEntryFiles(),
        resolve: {
            alias: {
                jquery: path.join(__dirname, 'node_modules/jquery/src/jquery'),
                $: path.join(__dirname, 'node_modules/jquery/src/jquery'),
                '@': demoPath,
            },
            extensions: ['.js', '.scss'],
            fallback: {
                util: false,
            },
        },
        // ....
    }

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now