What is a webpack how does it works?What is a webpack how does it works?What is a webpack how does it works?What is a webpack how does it works?
  • Core Services
    • Web Design and Development
    • Mobile App Development
      • Android app development
      • iOS App Development
      • Flutter App Development
      • React Native Development
    • User Experience Design
    • Ecommerce development
    • Minimum Viable Product Development
    • IT staff augmentation
    • Data Labeling Services
    • Software as a Service Development Company
    • Business Analysis Services & BA Consulting
    • Cloud Application Development
  • Clients
  • Case Studies
  • Blog
  • Company
    • About Us
    • Team MTL
  • Platforms & Technology
  • Contact Us
✕

What is a webpack how does it works?

  • Home
  • Blog
  • MVP development
  • What is a webpack how does it works?
SAVE YOUR TIME & DIME IN APP DEVELOPMENT
SAVE YOUR TIME & DIME IN APP DEVELOPMENT
May 19, 2021
How to use digital marketing to grow your business in india
How to use digital marketing to grow your business in india
May 19, 2021
May 19, 2021
Categories
  • MVP development
  • Web app development
  • Web design and development
Tags
What is a webpack how does it works?

Welcome to the Metric Tree Labs blog series. (I would advise watching the video along with the content to visually understand the concept better)

Today we are going to cover Webpack.

Webpack is a widely used Bundling tool. Bundlers allow us to package, compile, and organize many assets and libraries needed for a modern web project.
In this tutorial, we'll see how to write modules, bundle code, and use some of the loader plugins. This tutorial is designed for total beginners to Webpack, but having some JavaScript knowledge is advised.

So,
Starting with creating an empty folder by mkdir command and run npm init inside the folder.
This will create an npm scaffold that we can use to run npm commands.
We dont need these values so, keep as it is.
Now we’re going to install webpack and wbpack-cli. using npm.
I’m using vscode.
Then, we want a webpack-config.js file. It consits of two parts , the entry point to our js. And
output path to export our bundle.

Now we’ll set up our app’s entry point. Create an src folder in out directory and create an index.js.
Just to show is as loading, We’re logging an output; This will load whenever index.js loads.

Now, to start bundling our src folder, we need to edit our package.json file. Build and watch scripts will take care of this.
Webpack -p will minify and make our code ready for production and webpack –watch will observe any changes in our file and budles it in real time.
Run the command by running “npm run watch” to watch all the files inside src folder for any changes . And when a change occurs, the webpack will incoporate the relevant changes in our bundle.

Then, we need an HTML file to host and run our bundle. I’m using emmet for quick
scaffolding for an HTML page. And attach our bundle.js in our index.html page.

I’m using PHP as my server. And in our browser load the page.
If we, check out the console of the page and we can see the log. And our page works.
This project consists of only one file and it’s not much like a real-world javascript app.
To make this, We’re adding one more file. Create a new file in our src folder and export the function from the file.
Then, import it in our index file. webpack supports import, require most of all js imports. So we don’t have to worry about it.
Import it to our entry point and call the function that we’ve exported from our greet.js file.

Boom!. It works.

Now, We’re going to import a package to our functions to make it more realistic.
Install moment, a js date parser package to our greet.js file.
As we did before, Import the moment package.
Moment() will return today’s date and format() will format the output, as we configured, It will return today’s day by passing ‘dddd’ to format().
And append the day to the log of our greet function.
And we refresh..
Yeah, The day is shown.
So, if we look into the bundle.js inside the dist folder, we can see a minified js file that includes every package, functions that’s imported in index.js, and its children.
We only linked out bundle.js file to our page and it loads every action that we’ve imported.
So, Simply, the webpack takes away the burden of handling multiple files on our page and minimizes the load time of our app.

That’s the core of Webpack and this is the actual working of webpack in today’s real world
javasript apps.

Share
0

Related posts

How To Hire a team of Dedicated Developers? – A Guide To Hire The Best Team in 2022
September 7, 2023

How To Hire a team of Dedicated Developers? – A Guide To Hire The Best Team in 2022


Read more
Why you should choose ReactJS for front-end development of your project.
July 25, 2022

Why you should choose ReactJS for front-end development of your project.


Read more
Full stack software development using MERN stack

Full stack software development using MERN stack

July 4, 2022

Full-stack software development using MERN stack


Read more

Comments are closed.

Connect with us

Let us know your interest in our company, by sending us a message.

Metric Tree Labs is recognised as one of the best software development companies in global software industry.
Metric Tree Labs specialises in custom software solutions, mobile application development, ERP solutions, website design and MVP development

    Fueling smarter business decision by creating unique product experiences

    Facebook Instagram Linkedin
    Privacy Policy
    • Core Services
    • Web design and development
    • Mobile App Development
    • Cloud Application Development
    • User Experience Design
    • Ecommerce development
    • Minimum Viable Product Development
    • Business Analysis Services BA Consulting
    • Clients
    • Case Studies
    • Company
    • Management
    • Blog
    • Platforms and Technology

    United Kingdom
    71-75 Shelton Street, Covent Garden,
    London WC2H 9JQ, UK

    India
    7 Providence,
    Mahakavi Vailoppilli Rd, Palarivattom,
    kochi, Kerala 682025

     For Sales Enquiry

    India
    +91 6238903365

    United Kingdom
    +44 7985599480
    [email protected]

    For Jobs and Internships
    +91 6238903363
    [email protected]

    Connect with us

    Let us know your interest in our company, by sending us a message.

    Metric Tree Labs is recognised as one of the best software development companies in global software industry.
    Metric Tree Labs specialises in custom software solutions, mobile application development, ERP solutions, website design and MVP development

      Fueling smarter business decision by creating unique product experiences

      Facebook Instagram Linkedin
      Privacy Policy
      • Core Services
      • Web design and development
      • Mobile App Development
      • Cloud Application Development
      • User Experience Design
      • Ecommerce development
      • Minimum Viable Product Development
      • Business Analysis Services BA Consulting
      • Clients
      • Case Studies
      • Company
      • Management
      • Blog
      • Platforms and Technology

      United Kingdom
      71-75 Shelton Street, Covent Garden,
      London WC2H 9JQ, UK

       

      India
      7 Providence,
      Mahakavi Vailoppilli Rd, Palarivattom,
      kochi, Kerala 682025

       For Sales Enquiry

      India
      +91 6238903365

      United Kingdom
      +44 7985599480
      [email protected]

      For Jobs and Internships
      +91 6238903363
      [email protected]

      © 2023 Metric Tree Labs, All Rights Reserved

        WhatsApp us