packing up javascript with webpack

Ouch :) This article was published 2 years ago - might be out of date, check out stuff or leave comment

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


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


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

npm i mdb-ui-kit

instanciate popovers

Source :

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

Other examples

Leave a Comment

Your email address will not be published. Required fields are marked *

To top