Know about Webpack!!!

Webpack

It is the management system that is used in development to maintain the files in systematic order. Like if we have several files and corresponding HTML and CSS files for that, it will be a difficult task.
To maintain all those files, Webpack is useful.
It bundles all the files and necessary configuration in it which is used for development.
Configurations of development are handled by Webpack, for example

If you want the changes to reflect immediately in the web here watch is used to do that.
To increase the target API timeout proxy is being used.

So make sure whatever the changes you want to do it will be done in only development, the production configuration is handled by the server on which your application is running.
In the production the files are bundled as it does.
All the dependencies are bundled in vendor.[somehash].js file.
All the app related modules will be bundled in app.[somehash].js files
To map these all files manifest is used, which maps all the modules to the respective pages.

The Main core concepts of Webpack are:

Entry — where the project to be started normally that is index or app.js files

Output — tells Webpack where to emit the bundles it creates and how to name these files.

Loaders —These are the loaders like on which the project is dependent on. let’s say for example

Style loader which is used for styles
CSS loaders to load CSS properties

Plugins — These are kind of modules which helps the project to work smoothly.

So, Webpack, at last, compressing all the files and which is linked ultimately to index.html file where all the scripts are
linked at one place.

I hope now you have a brief understanding of Webpack. For a detailed info on the Webpack, please check out the documentation below:
https://webpack.js.org/concepts/

Thank you !!!
:)

--

--

--

UI developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Web Components in 2019: Part 2

Introduction to TypeScript Classes

Developing Vue Apps with the Quasar Library — Stepper

My best VSCode Linting/Formatting configuration for Typescript Projects

Introductory Blog

Best of Modern JavaScript — Sets and WeakSets

What is encoding and how ASCII differ from Unicode?

JavaScript Tips — Throwing Errors, Hostnames, and More

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Kovuri

Abhishek Kovuri

UI developer

More from Medium

The Good HTML Component

“But It’s Against My Nature!” —

JavaScript: How to fix ng.ps1

Typescript Numeric Literal Types How To Find Nth Root of X