Documentation v8.0.28

Preview 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

Download the latest theme source from the Marketplace.
Download and install Node.js from Nodejs. The suggested version to install is 14.16.x LTS.
Start a command prompt window or terminal and change directory to [unpacked path]/theme/tools/:
```
cd theme/tools/
```
Install the latest NPM:
```
npm install --global npm@latest
```
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.
Install the Metronic dependencies in [unpacked path]/theme/tools/folder.
```
yarn
```
We recommend using Yarninstead NPMfor the Metronic dependencies setup. Yarnsupports nested dependencies resolutions in package.jsonwhere spesific version of sub dependacies are required such as resolutions: { "gulp-dart-sass/sass": "1.32.13" }.
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
```
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.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 --demo1

Use --rtlparameter to generate RTL version of required CSSfiles.

npm run build --rtl --demo1

Use --prodto build assets for production with minified CSSand JavaScriptfiles.

npm run build --prod --demo1

Use --cssto build only CSSfiles.

npm run build --css --demo1

Use --jsto build only JavaScriptfiles.

npm run build --js --demo1

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:

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.
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]
```
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]
```
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");
```
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");
```
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\metronic_html_v8.0.28\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,
        },
    },
    // ....
}