Sign in
Log inSign up
Project Setup and Installation

Project Setup and Installation

Ajo John's photo
Ajo John
·Feb 22, 2019

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

Screenshot from 2019-02-22 20-42-24.png

  • Create a folder mkdir learn

Screenshot from 2019-02-22 20-43-02.png

  • Now lets initialize it for npm using npm init

Screenshot from 2019-02-22 20-43-32.png

  • 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

Screenshot from 2019-02-22 20-44-15.png

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

Screenshot from 2019-02-22 20-46-13.png

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

Screenshot from 2019-02-22 20-50-21.png

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

And here we go :)

Screenshot from 2019-02-22 21-06-34.png

  • 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

Screenshot from 2019-02-22 21-07-01.png

Here is how webpack packed our code in app.js

Screenshot from 2019-02-22 21-07-50.png

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 :)