Documentation v1.2.1

Preview

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 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 upgrade after every Craft 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.
Install the Craft dependencies in [unpacked path]/theme/tools/ folder.
```
yarn
```
We recommend using Yarn instead NPM for the Craft 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" }.
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 assets/ folder:

Note on the package.json file. This step is very important for Webpack in Craft 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
```
Start the localhost server:
```
npm run localhost
```
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.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 SASSJavaScript 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

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

npm run build --rtl

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

npm run build --prod

Use --css to build only CSS files.

npm run build --css

Use --js to build only JavaScript files.

npm run build --js

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:

Get the new plugin package from yarn site Yarn Package Manager's site and 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_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. 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 Craft'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\craft_html_v1.2.1\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,
        },
    },
    // ....
}

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v1.2.1

Webpack Quick Start

Build Options

Adding New Plugins

Configuration

Integration

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v1.2.1

No result found

Webpack Quick Start

Build Options

Adding New Plugins

Configuration

Integration