logo

Keen Admin

Bootstrap 4 Admin Dashboard Framework

Webpack

Overview

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 https://webpack.js.org/

Build Command and Options

These are the list of commands available:

The default build using Webpack.

npm run build

This command use 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 watch

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

npm run localhost
Parameter Type Description
--rtl boolean

Optional. Default is false. To generate RTL for all CSS files.

Example
npm run build --rtl
--prod boolean

Optional. Default is false. Set the Webpack to production mode and minify all assets.

Example
npm run build --prod
--css boolean

Optional. Default is true. Set false to exclude all SCSS and CSS related files from being compiled.

Example
npm run build --css=false
--js boolean

Optional. Default is true. Set false to exclude all JS related files from being compiled.

Example
npm run build --js=false

Build Config

The Webpack file entries are located at [keen]/theme/[demo]/tools/webpack/ and you can customize the output file to meet your project requirements:

Example of custom plugin in [keen]/theme/[demo]/tools/webpack/vendors/custom/datatables.bundle.js

/**
 * @output vendors/custom/jstree/jstree.bundle
 * @images ../../../../../themes/framework/media/vendors/jstree/32px.png
 */
Build Config
Parameter Type Description
@output string Required. Specify the output file.
@images string Optional. List of image to copy along with bundle. Multiple images separated by commma (,). The image will be output under bundle output directory images folder. The image path is relative to distPath defined in webpack.config.js

Add New Plugin

The new plugins from npm can be added into existing global.js file or in separate bundle. [keen]/theme/[demo]/tools/webpack/vendors/global.js

To create a separate bundle, check on these existing samples in [keen]/theme/[demo]/tools/webpack/vendors/custom/*

Get the new plugin package from yarn site; https://yarnpkg.com/en/. Install the new plugin using yarn (refer to this guide https://yarnpkg.com/en/docs/usage). This is the example command to add a new npm plugin. After running this command, the new plugin name will be added into package.json

yarn add [package]

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");

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;

window.Dropzone = require("dropzone");

This is to fix the browser to recognize the plugin when need to use it as new Dropzone()

To include CSS file from the plugin, use this;

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

Webpack Config Structure

Below is a file structure inside the default Keen's Webpack config. The Keen's Webpack config is located in [keen]/theme/[demo]/tools/webpack/*

Path Description
demosA folder contains demos entry files.
[demo..]Contain files for each demo scripts and styles
script.jsDemo specific scripts.
style.jsDemo specific styles. This file include the SCSS files from the src folder.
vendors3rd party vendor's plugins from npm or yarn.
customThis folder contains separate vendor's bundles.
global.jsThis is the global vendor includes which required for all pages.
demos.jsThis file contains the list of the current available demos.
scripts.jsThe Keen's core plugins and scripts.

Keen’s Key Features

Keen empowers your project with virtually limitless array of options
to create endless unique projects.

Multi Demo

Choose a perfect design for your next project among hundreds of demos

Limitless Components

A huge collection of components to power your application with the latest UI/UX trands

Angular 8 & React Support

Enterprise ready Angular and React integration with built-in authentication module and many more

Bootstrap 4

Metronic deeply customizes Bootstrap with native look and feel

Exclusive Datatable Plugin

Our super sleek and intuitive Datatable comes packed with all advanced CRUD features

75,000+ Strong

Metronic is the only theme trusted by over 70,000 developers world wide

Continuous Updates

Lifetime updates with new demos and features is guaranteed

Quality Code

Metronic is written with a code structure that all developers will be able to pick up easily and fall in love