Webpack

Webpack is an open-source bundler for JavaScript applications. It is used in web development to bundle JavaScript files along other assets such ass CSS, fonts and images into single or multiple bundles for development in a web browser.

This project, is a webpack used case, in which we make use of some webpack features such ass loaders and plugins. Some used loaders in this project include;

css-loader

babel-loader

svg-inline-loader

Installation & Usage

The following steps would guide us through the installation of nodejs, webpack, alongside some custom loaders. By the end, we would have a project sample/structure similar to that of the above.

We can install webpack locally in our project directory using the following commands;

To begin, we start by navigating into our project directory.

We then install nodejs (if not already installed)

For MacOs

brew install node

For Ubuntu

 sudo apt update
 sudo apt install nodejs

We can confirm the installation by checking the node version

node -v

Upon installing nodejs, it comes along with it's package manager called npm (Node Package Manager). Further more, we initialise our webpack project using the command;

npm init

To some, it is preferable to add the -y flag to it, so as to skip the interactive prompt hereby leading to quick project initialisation.

npm init -y

Once the project initialisation is done, we proceed with the installation of webpack (in our project directory).

npm webpack webpack-cli --save-dev

The above command installs Webpack webpack and Webpack CLI (Command Line Interface, webpack cli) as a development dependency (--save-dev flag)

Alternatively, the yarn package manager can be used to install webpack as well.

yarn add webpack webpack-cli --dev

We then proceed by creating our webpack.config.js file, in this file. In this file, we would configure Webpack for our project. This file allows us to specify various options and optimise how Webpack bundles our project. Some of the contents of this file are;

Entry point

Output configuration

Loaders Configuration

Plugins configuration

Mode configuration

DevServer Configuration

After creating it, we proceed by installing the various loaders and plugin used (as per our sample project)

npm install svg-inline-loader --save-dev
npm install --save-dev css-loader stlye-loader
npm --save-dev babel-loader

npm install --save-dev html-webpack-plugin

We install a webpack-dev-server as well. This package is a development server which provides live reloading and hot module replacement (HMR) functionality for our webpack bundles during development.

npm install webpack-dev-server --save-dev

Some modifications are also done in the package.json, under the scripts section. The added content, is used to build our project for production and typically starts the webpack-dev-server.

After completing the above steps, and having the same code like that of our sample project

https://github.com/ValantineSuh/Webpack

We can now run our code using the following commands;

Start by building it:

npm run build

Upon running this command, a new directory called dist would be created, containing bundle.js and index.html files.

After building, run your code using;

npm run start

You can then confirm on the browser via the localhost provided during execution, navigate to your console, and verify the various console logs you provided.

At this point, you can identify is it was successful or not.