Documentation v8.0.9

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 upgradeafter every Metronic update is released in order to receive newly added or updated 3rd-party plugins.
    Use npm cache clean --forcecommand, if the installation had failed at any step. Retry again from beginning once it's done.
  6. Install yarn dependencies. Must execute in [unpacked path]/theme/tools/folder.
    yarn
    
  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.jsonfile. This step is very important for Webpack in Metronic template. The default package.jsonworks for Gulp. To make it work for Webpack, you have to modify tools/package.jsonand remove "type": "module". Otherwise, it will cause compilation error when running the next command.
    npm run build --demo1
    
  8. Use below command to start the Webpack real-time watcher. This task watches the sass/js files and automatically recompile whenever the source files are changed.
    npm run localhost --demo1
    
    Keep the console open. Open this link to run http://localhost:8080/. 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.jsonfile" above.

Build Options

The main webpack build config file is located in tools/webpack.config.jsand 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 SASSJavaScriptfiles 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
Use --rtl=trueparameter to generate RTL version of required CSSfiles.
npm run build --rtl=true
Use --prodto build assets for production with minified CSSand JavaScriptfiles.
npm run build --prod
Use --cssto build only CSSfiles.
npm run build --css
Use --jsto build only JavaScriptfiles.
npm run build --js

Adding New Plugins

The new plugins from npm can be added into existing main tools/webpack/plugins/plugins.jsbundle 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_modulesfolder.
    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/webpackfolder.
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.jsfor 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;
}

srcPathis an absolute path to your srcfolder. Eg. C:\wamp64\www\keenthemes\_releases\metronic8_html_v1.0.0\theme\demo1\src

These are the example output entry file paths to be passed into the Webpack entryconfiguration. The array keyis the destination output and the valueis 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 entryoption in the webpack.config.jsalong with other Webpack configurations.

resolve.aliasis required for alias symbol @to point to the demo srcfolder. It's been used in the theme/tools/webpack/.

Read more information about the resolve.aliason 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,
        },
    },
    // ....
}

Activity Logs

There are 2 new tasks for you in “AirPlus Mobile APp” project:
Added at 4:23 PM by
img
Meeting with customer
Application Design
img
img
A
In Progress
View
Project Delivery Preparation
CRM System Development
img
B
Completed
View
Invitation for crafting engaging designs that speak human workshop
Sent at 4:23 PM by
img
Task #45890merged with #45890in “Ads Pro Admin Dashboard project:
Initiated at 4:23 PM by
img
3 new application design concepts added:
Created at 4:23 PM by
img
New case #67890is assigned to you in Multi-platform Database Design project
Added at 4:23 PM by
Alice Tan
You have received a new order:
Placed at 5:05 AM by
img

Database Backup Process Completed!

Login into Metronic Admin Dashboard to make sure the data integrity is OK
Proceed
New order #67890is placed for Workshow Planning & Budget Estimation
Placed at 4:23 PM by
Jimmy Bold
Pic
Brian Cox 2 mins
How likely are you to recommend our company to your friends and family ?
5 mins You
Pic
Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
Pic
Brian Cox 1 Hour
Ok, Understood!
2 Hours You
Pic
You’ll receive notifications for all issues, pull requests!
Pic
Brian Cox 3 Hours
You can unwatch this repository immediately by clicking here: Keenthemes.com
4 Hours You
Pic
Most purchased Business courses during this sale!
Pic
Brian Cox 5 Hours
Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided
Just now You
Pic
Pic
Brian Cox Just now
Right before vacation season we have the next Big Deal for you.

Explore Metronic

Demo1

Demo2

demo
Coming soon

Demo3

demo
Coming soon

Demo4

demo
Coming soon

Demo5

Demo6

demo
Coming soon

Demo7

demo
Coming soon

Demo8

demo
Coming soon

Demo9

demo
Coming soon

Demo10

demo
Coming soon

Demo11

demo
Coming soon

Demo12

demo
Coming soon

Demo13

demo
Coming soon

Demo14

demo
Coming soon

Demo15

demo
Coming soon