Webpack integration

webpack is a tool that makes a single javascript out of plenty of various libraries and styles. In this tutorial we show you how to start a new javascript project with the following libraries

jquery
bootstrap
mdbootstrap

installing node js

webpack relies on node.js : you must download and install node js from the official website for your platform before you install webpack

nodejs installs globally, at this stage you just let the installer do its work. You will decide on the work folder for your project after webpack is installed globally too. Verify node js is installed by typing on the command line or terminal :

node -v

NPM

when you download and install node, you have npm installed with it : npm stands for Node Package Manager, it is a tool that allows you to download stuff from the command line, add them to your projet in one click. We wil now use npm to download and install webpack

installing webpack

now that you have nodejs installed with its package manager npm you can go ahead and install webpack. You have two options of installation, locally or globally. Local is harder to maintain over time because you can use different version of webpack on each project, and it takes more space, and you have to install it again and again. Global is nice but if you need to upgrade version, all projects are affected and potentially damaged. I go global :

npm install --global webpack`

webpack config file

If not specified in package.json, the default webpack config file is webpack.config.js file in the root folder.

If you need to use a different configuration file, or write a dev script and a build script, the webpack --config flag specifies a specific config file for each script

package.json

scripts": {
  "build": "webpack --config prod.config.js"
}

including bootstrap

in your script.js you have to include bootstrap and then declare the object

`npm` : download libraries into the project

npm install bootstrap

pay attention to error messages : here this npm command might send a warning calling for installation of @popperjs/core@^2.9.2 dependency, a javscript library that creates nice popin. do it like this :

npm install @popperjs/core@^2.9.2 --save-dev

`js/css` : importing libraries

write this at the top of your css file (style.css)

@import "bootstrap";

and this guy at the top of you main js file (script.js), first approach

import "bootstrap";

or better, second approach allows you to use to bootstrap object

const bootstrap = window.bootstrap = require('bootstrap');

this bootsrap object will be used later below to instanciate popovers

including fontawesome

npm install --save @fortawesome/fontawesome-free
@import "@fortawesome/fontawesome-free/css/all.css";

writing and structuring the html page

start working on index.html page : a nice bootstrap 5 structure that will end up with a lot of lines. In order to make it lighter you can divide the html in partials, with the help of HtmlWebpackPartialsPlugin that installs itself in a few commands

load the library dependency : npm add html-webpack-partials-plugin --save-dev
in your webpack config file,
declare the new library const HtmlWebpackPartialsPlugin = require('html-webpack-partials-plugin');
add a plugin with files you need to inject in body of your html , one line per file :
- new HtmlWebpackPartialsPlugin({ path: path.resolve(__dirname, '../src/partials/menu.html') }),

including static images

webpack byt default generates images with random names

you can also take images drom a static directory using CopyWebpackPlugin

install mdbootstrap

https://mdbootstrap.com/

npm i mdb-ui-kit

instanciate popovers

Source : https://mdbootstrap.com/snippets/jquery/mdbootstrap/888655

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover-click"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
html: true,
trigger: 'focus',
placement: 'right',
content: function () { return $('#popover_content_wrapper').html(); }
})
});

Other examples

multiple webpage webpack project starter is a good example of a basic webpack config file. It is written by Marcin Wozinek who makes a full tutorial on the subject