Understanding Webpack (Configuring your own project with webpack)

Webpack has been very familiar for us developers especially for the JavaScript lovers out there but really, do we actually know what does Webpack to our project and how does it help us in our daily life coding and the most important question is do we have the power to configure it on our own without the help of schematics by other JavaScript frameworks. If you have experience in Angular or React programming, we will always see that our project is already created with an associated Webpack and we don't have to worry about anything, but it is very useful as a developer to know how every parts of how our project works because someday we might want to tweak our application with a different behavior that we prefer.

In this article I will show you how to configure our Webpack from scratch with a simple JavaScript project using ES6 code.

What the hell is Webpack

Webpack is mainly a project bundler that every frameworks use meaning that it bundles all of our modules and dependencies in in one file for production, we don't want our application to be very big and complex on our prod server as this will cause performance and latency issues as users will download big chunk of files in their browser, so Webpack will be the one handling all that issues.

Let's say for an Angular project for example, Angular has very dependencies involved in development, and as the project gets larger and larger more files will be added in our project and will be having more code. Let us look at a sample Angular project below

we can see that our project has several files and dependencies, we don't want this to be served in our production as this will be very complicated in deployment and can cause huge impact on the performance. now lets open the dist folder on our project.

inside the dist folder, we can see several JavaScript files and these files contains all the code of out project, this is our build file accomplished by Webpack that we will put into production, we will notice that all of these are plain JavaScript that can be interpreted by our browser.

Going to configuration

The first thing we need here is we need initialize our project as an npm project, in this example we will create a folder named node-js-webpack and in the folder root we will execute the command:

npm init --yes

after successfully execution we will now see the package.json file created in our root folder, we will also add a src folder where we will place our file entry point which is the index.js and another folder named dist where we will place all our bundles js files.

Let's just add a sample code in our index.js file to be transpiled later with Babel and will be bundled by webpack.

const addNumber = (x, y) => {
 return x + y;
}
addNumber(1, 2);

we can clearly see that our code here is on ES6 as we are using a lambda expression.

Now, our folder structure would now look like this. now we can install the other dependencies we need in compiling our code. obviously we need to install webpack itself, webpack-cli, @babel/core, babel-loader and path.

@babel/core - holds the babel compiler

babel-loader - it will transpile all of our ES6 code into ES5 that our browser can understand.

webpack-cli - holds the commands for webpack where we can bundle our javascript code,

path - is a library for accessing and handling file paths, (this will be used for us to direct webpack where it will put the bundled code)

to install the dependencies we will execute the following command.

npm i -D webpack @babel/core babel-loader webpack-cli path

after successfully installed all the dependencies, we will now add a webpack.config.js file on our root folder, this file will be used by webpack as a setting for bundling our files. we will paste this code inside webpack.config.js

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

now lets discuss, the parts of this code part by part. I have said that this will be used as a setting by Webpack the module.exports contains all the properties needed by Webpack for bundling.

Context: we have defined this one as __dirname which is the absolute path where we execute the command.

Entry: this is where we will instruct webpack what file/s it should build and bundle.

Path: this is where we will instruct webpack to place all bundled files, in this case we will place it on our dist folder we have created.

Rules: this is where we define that all JS files should be transpiled into ES% using babel loader, we want to exclude node_modules for this one as this is our dependencies.

Now we are all set, the only thing we need to do is add our commands to run webpack to bundles our code.

we will add this code in our package.json file in the scripts property.

"scripts": {
  "dev": "webpack --watch --mode=development",
  "prod": "webpack --mode=production"
},

running npm run dev will execute the webpack --watch --mode=development, the watch parameter will allow restart on code changes.

running npm run prod will execute the webpack --watch --mode=production that will now generate the awesome.js file in the dist folder.

And thats it! we now have successfully bundled our JS file, we will see in our dist folder that it will have the awesome.js file where our code is bundled and transpiled into ES5.

Having multiple entry points

In our previous example, we have generated a single file for our javascript code, what if we wanted to generate a bundled file for each JS files in our project?

The only thing we need to do here is modify our webpack.config.js entry points and define it as a JSON object that contains all the enrty points wee need.

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

 entry: {
  index: './src/index.js',
  header: './src/header.js'
  footer: './src/footer.js'
 },

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

we can see here in our example that we have define our entry points into multiple paths where each js files will have their own entry points.

this will now create index.js, header.js and about.js file inside our dist folder.

And we have successfully configured our webpack from scratch! I hope you have learned from my blog and if you want to learn more about javascript especially on framworks, you can checkout my tutorials on Angular and React.

Cheers!