14.16.x LTS.[unpacked path]/theme/tools/:
											
cd theme/tools/
													
npm install --global npm@latest
													
npm install --global yarn
													yarn upgradeafter every Metronic update is released in order to receive newly added or updated 3rd-party plugins.
													npm cache clean --forcecommand, if the installation had failed at any step. Retry again from beginning once it's done.[unpacked path]/theme/tools/folder.
											
yarn
													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" }.dist/assets/folder: State which demo to compile and append at the end of the command. Eg.
											--demo1
											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
													
gulp localhost
													http://localhost:8080/demo1/dist/
													. It will take a few seconds for the build to finish. To stop a localhost environment, press
													Ctrl+C.ReferenceError: require is not defined. Check on the "Note on the
													package.jsonfile" above.tools/webpack.config.jsand you can fully customize the build settings to meet your project requirements.SASSJavaScriptfiles and automatically recompile whenever the source files are changed.
										
npm run watch
												
npm run localhost --demo1
												--rtlparameter to generate RTL version of required
										CSSfiles.
										
npm run build --rtl --demo1
												--prodto build assets for production with minified
										CSSand
										JavaScriptfiles.
										
npm run build --prod --demo1
												--cssto build only
										CSSfiles.
										
npm run build --css --demo1
												--jsto build only
										JavaScriptfiles.
										
npm run build --js --demo1
												tools/webpack/plugins/plugins.jsbundle or in separate bundle. To create a separate bundle, check on these existing samples in
										tools/webpack/plugins/custom/*packages.json
											
yarn add [package name]
													packages.json
											
yarn add [package name]
													node_modulesfolder.
											
require("[package]");
require("path/to/dist/package.js");
													new Dropzone().
											
window.Dropzone = require("dropzone/dist/min/dropzone.min.js");
													
require("path/to/dist/package.css");
													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. | 
theme/tools/webpack.config.jsfor more details.
										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";
// ....
												tools/webpack/plugins/plugins.js.
										
// tools/webpack/plugins/plugins.js
window.jQuery = window.$ = require('jquery');
window.bootstrap = require('bootstrap');
window.Popper = require('@popperjs/core');
// ....
												
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.38\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,
        },
    },
    // ....
}