/ 2 min read

Simplify webpack with its CLI 😎

webpack can be tedious, simplify it using it's CLI!

Hi, I am back with more JavaScript. This is a micro blog post, which is just for those who want to get started with next project with webpack but are overwhelmed by … yeah! its config file. This is also for those who just want to start get started with their web development projects, but don’t want to get into webpack technicalities all together.

So, for this you would be using a helper sub-package hosted by webpack-cli named init.

Setup npm project

So, first step to get started is to create an empty folder named and get into it. To do it just write following in the terminal.

bash
mkdir myWebProject
cd myWebProject

Now you have to initialize your new npm project using

bash
Terminal window
npm init

If you don’t have node and npm setup. Please do that first. Can’t setup on your own ?, I will try to help you out !! Just comment below.

Unpack webpack !

Now we would be installing webpack, webpack-cli, @webpack-cli/init as devDependency to your project. Do it using:

bash
Terminal window
npm install --save-dev webpack webpack-cli @webpack-cli/init

This should install just fine. Warnings are ignorable, If you find some errors, report ‘em to us at our public repository. We would try to solve it for you.

Now let’s create a new webpack project using init. Try:

bash
Terminal window
npx webpack-cli init

This will pop up questions for you to answer, After you answer ‘em you would have your webpack configuration without actually writing it on your own. Cool.

For those who want to get context to the questions asked, please follow up to init documentation where I have also included which question affect which part of the webpack configuration.

Pro Tip: you can also use custom scaffolders like webpack-scaffold-pwa by @sendilkumarn and me! using

npx webpack-cli init webpack-scaffold-pwa

This will help you get started with a high lightscore pwa app. Please give us review on this on GitHub or at twitter tagging either @sendilkumarn or @rishabh311121999

Have fun.

About webpack-cli

It is official CLI to webpack. Apart from acting as CLI to webpack, it also exposes several helper package to help developers with webpack configurations. It is actively maintained at webpack, by awesome people like @evenstensberg , @ematipico and @dhruvdutt.

Me and webpack: I have been using webpack for several projects. It have been my must have tool. I am also a member at webpack and actively contributing to webpack-cli since Jul’18 ( ~ 8 months )