Setup JavaScript project environment with Webpack, ESLint, Babel & git

Apart from the core architecture of your project, one thing that is really important is to setting up the proper environment of the project. Your different projects could be using different frameworks or libraries of JavaScript, but it’s always better to use a single environment for all your projects across teams.

What we’re going to do here

  • Module management with webpack.
  • Dev & production build.
  • Bunding & minifications.
  • Handles ES6 with babel.
  • Linting with ESLint.
  • Precommit hook to restrict developers to commit if linting or building fails.

You can clone the git repo of mine to help yourself understanding the tutorial. You can even fork your project from that repo.

Create project

So let’s see how to start setting up a JavaScript project from scratch. First create a repository in github (you can use any other git hosting site or even bare git of your machine) and clone it to your local machine. Let’s assume the name of the project is JS-StarterKit.

Now when all your cloning etc are done; navigate to the project folder from your terminal (command prompt in case of windows).
Using npm scaffold a project. All you need to do is to run the command npm init and answer the questions which it will ask and you will get the package.json file in the directory. Hope you know about node js and npm. If you don’t you can google about them.

Now you can create two more files; one is index.html and another is index.js in a new folder called app. As this is a JavaScript application, so all our application logic related code will go inside the app folder. If your application is not a front-end one, you can skip the creation of index.html. But if it’s a front-end one, make sure you add some html stuffs in that html file with attaching a bundle.js script tag inside it. We (actually webpack) will create the bundle.js file.
For now, your html & js file will look like the following.

index.html

index.js

Setting up webpack

Webpack is probably the best module loader of today with huge flexibility. You can load different modules, process them separately, bundle, minification and lot of other stuffs.
You need to install two packages. webpack and webpack-dev-server. The second one is for auto check file changes & serve the files.

We’ve used the --save-dev flag to mark these packages as devDependency in package.json file. Install webpack globally too with npm i -g webpack to be able to run the webpack command from your terminal.

Now that webpack is installed we can create a file named webpack.config.js to configure our webpack. So create that file in the root folder and add the following code in it.

The above config will tell webpack to start scanning from index.js file and bundle everything to bundle.js file.

You can run the command webpack and see how things are bundled to a new file bundle.js and also test the index.html file in the browser to find that the console.log statement os index.js is being printed in the console.

This is just a short intro of webpack, but you can google more about it to gather in depth knowledge.

Install ESLint

ESLint is one of the best linters for JavaScript. You can configure it just the way you want. If you are not familiar with it yet, you can check the eslint tutorial.

To setup ESLint with our webpack, you should install the following packages.

You need to configure your eslint running the command eslint --init from your root directory. It will ask you few questions and answering them properly will create an .eslintrc.json file. Instead of running the eslint --init command you can also use the following json directly after creating .eslintrc.json.

Now that eslint is installed and configured, time to use it in our webpack config file. The webpack.config.js will look like the following now.

Now, running the command webpack will check for linting error first and then will build anything.

Install Babel

As all browsers do not support ES6 or beyond fully, you need to use any transpiler in your project (if it’s client side). We’re using babel, one of the popular transpilers. Install the packages related to it with the commands below.

Change your webpack.config.js as following to convert the ES6 codes in ES5 with babel.

Now you can use ES6 codes in your JavaScript files inside the app folder. All of them will be converted to ES5 by babel before webpack bundles them to bundle.js file.

Pre Commit hook

Just making the rules are not enough; you need to force the developers to follow those cause developers often forget manual works. We will add a check in git pre-commit to prevent the developer to commit & push anything that is failed by ESLint.

You need to change few configs in package.json to make this work. Below are the snippet of that part.

It will trigger the npm test command, which is webpackjust at the time anyone tries to commit something and will fail the commit if the webpack command failed for any reason (suppose ESLing error).

Final package json & webpack config

I’ve inserted few more npm scripts in the package.json file and now it looks as the following.

So apart from npm start we also have an npm run build now which will bundle and minify the bundle.js inside a folder called dist. You can see I have passed a config file as prod.webpack.config.js which will hold the production build related configurations. Ass that new file in your root and use the code below.

The final project

The entire base project which we tried to build by this tutorial is available on this git repo. You can directly clone it in your desktop and check how its working. Better to fork it so that you can test all pre-commit etc properly.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.