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 yarnDon't forget to runyarn upgradeafter every Good update is released in order to receive newly added or updated 3rd-party plugins.
Usenpm cache clean --forcecommand, if the installation had failed at any step. Retry again from beginning once it's done. - Install the Good dependencies in
[unpacked path]/theme/tools/folder.yarnWe recommend usingYarninsteadNPMfor the Good dependencies setup.Yarnsupports nested dependencies resolutions inpackage.jsonwhere spesific version of sub dependacies are required such asresolutions: { "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:Note on thepackage.jsonfile. This step is very important for Webpack in Good template. The defaultpackage.jsonworks for Gulp. To make it work for Webpack, you have to modifytools/package.jsonand remove"type": "module". Otherwise, it will cause compilation error when running the next command.npm run build - Start the localhost server:
gulp localhostKeep the console open. Open this link to runhttp://localhost:8080/dist/. It will take a few seconds for the build to finish. To stop a localhost environment, pressCtrl+C.If you are getting this errorReferenceError: require is not defined. Check on the "Note on thepackage.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
--rtlparameter to generate RTL version of required
CSSfiles.
npm run build --rtl
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:
- 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.jsonyarn 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.jsonyarn 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 Good'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
This is the example for JS plugins
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');
// ....
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\good_html_v1.0.4\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,
},
},
// ....
}
2022©
Keenthemes
