2. Set up and Installation Webpack

In this blog, I will explain to you how to set up Webpack for your project. If you want to learn the basics of Webpack and why do we use it, you can watch the video below and then come back.

You may already know that Webpack bundles all of your modules and dependencies into one file which you can then include in your project for many reasons explained in the above video.
So once we install webpack, we need to tell webpack which are the modules/files it needs to bundle and the path where it needs to output a single bundled file.
So let’s begin 🙂

Prerequisites

What do you need to get started with Webpack?
Well, all you need is node js to be installed on your system. And node js comes preinstalled with npm

Installation

In order to install the webpack locally in your project, you need to go into your project and run npm init --yes command. The npm init creates a package.json file that stores a lot of information like the names and version no. of the installed npm packages, dependencies, scripts etc. The--yes flag allows you to skip all the questions it asks while executing the npm init command

cd projectname
npm init --yes // creates package.json
npm i -D webpack @babel/core babel-loader webpack-cli path

Babel allows us to write source code in our preferred programming language or markup language and have it translated by Babel into JavaScript, a language understood by modern web browsers.
@babel/core is babel compiler core.
babel-loader helps transpile our js code into ES5 as not all browsers understand ES6.
webpack-cli is a command line tool for webpack.
path module is used for handling and transforming file paths.
You can watch the tutorial video below to see it in action.

Create a src directory and file called index.js inside of it. Also, create a dist directory, this is where we will ask webpack to create the bundled file. And let’s say our main file is index.php . Once we do this, our directory structure would look like this:

-projectname
 -dist
  -main.js // This is the bundled file that webpack will create
 -src
  -index.js
 package.json
 index.php

./src/index.js is the file where you write all the codes and we will tell webpack to bundle all codes into one file ./dist/main.js

// src/index.js
const test = () => {
    console.log( 'test' );
};test();

The Webpack Config file

You can create a config file called webpack.config.js that stores the configuration for your webpack like the path for your entry point and output file, loaders etc. If you don’t create this file then webpack uses its default configuration file.
So let’s create a file called webpack.config.js in the root of your project and add the following configurations.

// webpack.config.js
const path = require( 'path' );module.exports = {
    context: __dirname,
    entry: './src/index.js',
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'main.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            }
        ]
    }
};

Now let me explain to you what each of these properties means.

We can define the path module first, which is used for handling and transforming file paths.
The module.exports makes the object on the right side of the equals sign, available to the outside world ( in this case to webpack ).

Using entry property value we tell webpack which file(s)/modules it needs to bundle and output defines where it needs to output the bundled file.

Entry: So entry is the point from where you will tell webpack to start building. In this case, it is ./src/index.js

Context: Context allows entry to take the root of the path that you have defined in context property. In this case its __dirname

Output: We define the path and the filename where the webpack will produce the output. In this case ./dist/main.js

Rules: Then we add rules in the module object which ensures that whenever it finds a *.js file, it uses babel-loader to convert it to ES5. We do so as not all browsers support ES6.

Add scripts in package.json

Now let’s add these custom scripts into package.json file.
Now run npm run dev . This will compile the index.js file from src directory and create main.js inside dist directory.

// package.json
"scripts": {
  "dev": "webpack --watch --mode=development",
  "prod": "webpack --mode=production"
},

webpack --watch --mode=development : Please note that when you run npm run dev it runs webpack — watch — mode=development . Here --watch command watches your changes so that you don’t have to run the webpack command multiple times.
webpack --watch --mode=production : Similarly when you run npm run prod it runs webpack — watch — mode=development

We run npm run dev for development and npm run prodfor production.
Please note that if you pass a -p flag , it generates a minified version of the build file for production. However when you run ‘npm run prod’, webpack automatically uglifies the bundle file so you don’t need to pass a -p flag.

You can now create index.php in the root of your project and add the below script before body ends to include the single bundled file produced by webpack

<script src="dist/main.js"></script>

That’s all you need to do to bundle a single file.

Create multiple entry points for individual pages

If you want to include multiple bundled file for individual files, then you can define multiple entry points and then on those individual pages, you can include these. So let’s say your file structure is:

-projectname
 -dist
  -index.js
  -about.js
 -src
  -index.js
  -about.js package.json
 index.php
 about.php

So In index.php you can include <script src=”dist/index.js”></script> and in about.php you can include <script src=”dist/about.js”></script>

const path = require( 'path' );module.exports = {
 context: __dirname,

 entry: {
  index: './src/index.js',
  about: './src/about.js'
 },

 output: {
  path: path.resolve( __dirname, 'dist' ),
  filename: '[name].js',
 }, module: {
  rules: [
   {
    test: /\.js$/,
    use: 'babel-loader',
   }
  ]
 },
 plugins: []
};

This will create ./dist/index.js and ./dist/about.js bundled files out of ./src/index.js and ./src/about.js respectively.

The placeholder [name] allows you to create dynamically named bundled files.
So for entry index, it becomes filename: index.js and for the entry about it becomes home.js