This post I will be explaining about setting up a basic JavaScript project, installing webpack and using it in the project.

Let's get started

Project Setup

• At first open up your terminal ctrl + alt + t

• Create a folder mkdir learn

• Now lets initialize it for npm using npm init

• On using the above command, you will be asked couple of questions where in which you will have press enter until it gets completed :)

• Now on ls you will be getting a new file called package.json

Hope you are with me :P

• Now let's create some basic folders and files needed for the project

• At first let's create a folder using mkdir src

• Now let's get into src by using cd src and create another folder by using mkdir scripts

• Let's move into scripts using cd scripts and create a new file using touch app.js

• After running the above commands, you will be getting a project structure as below

/learn
    package.json
    /src
        /scripts
            app.js

• Now let's write a simple code into our app.js

• For this type nano app.js which will open up an inbuilt editor and write console.log('Learn Webpack')

• Save the file by pressing ctrl + X after which press Y

• Now if we check app.js using cat app.js we could see our console.log() that we just typed in

Now we have setup a basic JavaScript project

Install and Using Webpack

• Webpack can be installed in two ways

• Install Webpack globally using

sudo npm install -g webpack

• Install Webpack locally in the project folder using

npm install --save-dev webpack

• Global Webpack Install

With this type of installation we can make use of the command webpack to pack our application

webpack ./src/scripts/app.js --output ./dist/app.bundle.js --mode development

In this the first argument ./src/scripts/app.js is the entry file from where the webpack will start building the module dependency tree and start packing them into a single output file.

The second argument ./dist/app.bundle.js is the output file which the webpack creates after packing the application and all the other module dependencies

• Local Webpack Install

We will be using this to serve our purpose

• For this let's move into the learn folder using cd learn

• Next we will have to install webpack using

npm install --save-dev webpack

• Now we need to use the scripts object in package,json

• Inside the scripts object, add a new property called start which will have a value

scripts: {
   "start": "webpack ./src/scripts/app.js --output ./dist/app.bundle.js --mode developement"
}

• Finally now your package.json should be looking like

• Now lets run our webpack that we just setup, using the command npm start

And here we go :)

• Now let's move into dist using cd dist and check what the output file looks like by usingnano app.bundle.js

And this is what it looks like

Here is how webpack packed our code in app.js

Hope you guys had a great time installing and using webpack.

If you like this post please don't forget to give a thumbs up :P

Those of you who missed out the first part, here it is

Next up I will be explaining on how to configure webpack options using the webpack.config.js until then cheers :)