"What does Webpack mean in simple words?"
"Internal Blog 12"
[ "What does Webpack mean in simple words? Necessityis the mother of inventionTheabove quote is a great way to express why webpack exists. But weshould go back, way back, to when JavaScript was not the cool newthing. The time when a webpage was just a tiny package of goodold.html, CSS, and possibly one or a few JavaScript files in certaininstances, to understand it properly. But all of that was about tochange eventually.Whatwas the issue?Theentire development community was dedicated to promoting the generaluser as well as developer experience when it came to using anddeveloping javascript/web applications. As a result, many newlibraries and structures have been released.Overtime, some design patterns emerged to provide developers with animproved, more strong, and still very straightforward way to writecomplicated JavaScript apps. Websites used to be nothing more than asmall package containing an odd quantity of data. With the emergenceof JavaScript modules, they stated that they were becoming heavy, aswriting contained tiny bits of code was the new craze. All of thisultimately reached a point where the entire application package had4x or 5x the number of files.CodeMismatch: Not only was the application's total size a struggle but there's also a significant gap between the type of codedevelopers were composing and the type of code browsers cancomprehend. To ensure that browsers could perceive the code in theirbundles, developers used a lot of helper code called polyfills.Webpack was designed to address these problems. A static modulebundler is Webpack.Whatis a webpack?You'veprobably heard the term "webpack" before if you're workingon a javascript - based application. Webpack is a static modulebundler for JavaScript applications that takes all of your code andturns it into something that can be used in a web browser. Modulesare reusable bits of code made up of JavaScript, node modules,images, and CSS styles that are bundled and ready to use in yourwebsite. Webpack divides your code into modules based on how it'sused in your app, making it much easier to handle, debug, confirm,and check your code.Howdid Webpack solve the problem?Ina nutshell, Webpack goes through the package and generates adependency graph, which is a collection of various modules that yourweb app will need to function properly. Then, based on this graph, itgenerates a new package with the minimum level of files needed, whichis mostly just a standard bundle. js file that can be easily insertedinto the HTML file to be used in the application.Whatare the principles of webpack?Webpackconsists of five principles:Entry;Theapplication's entry point is called entry. This is the first module(JavaScript file) Webpack will process to complete the dependencygraph. The files that are shipped into the entry will be examined andintroduced to the dependency graph. It then proceeds to walk throughall of the imported files till all the code required to operate theapplications has been found.Webpackdetermines which other components are internally and externallydepending on the entry point. In modern JavaScript apps, the defaultentry point is.'/src/index.js', but this can be changed to anyfile you want. There is also the option of having multiple entrypoints.OutputTheoutput part is where the files will be written to disc, along withtheir names. './dist/main.js' is the main output file, andevery other file is placed in the dist folder. The output is locatedin the same place as the entry point. The material of the output canalso be hashed or chunked, allowing it to be constantly modified asthe code changes. This ensures that the appropriate code is served.LoadersThegoal of webpack is to compile all of your dependencies, whichcontains not only code but also other assets, into a dependencygraph. Since bundlers can only manage JS files, webpack mustpreprocess all other files but also assets before they can begrouped. This is where the loader arrives. Webpack can broaden itsfunctionality by transforming other file types into modules for theapplication using Loaders.Theloaders are clarified in the rules section of the module key. To adda loader, you'll need two configuration settings: test, whichrecognises which files or data formats should be converted, and use,which informs Webpack which loader to be used to convert these files.Loaders could also be used from the command line in conjunction withimport declarations.PluginsPluginstake care of the extra tasks that a loader cant manage. Thisinvolves things like bundle optimization and setting environmentvariables, among other things. Needed to extract a style sheet ortrying to generate an index.html file for a single-page webapplication is yet another instance.ModeWebpackuses mode to determine which configuration and optimizations areappropriate for the application. This activates some built-in Webpackmode-specific plugins, allowing it to be built for the rightatmosphere. Development, production, or none are the options. If youdon't specify a mode, Webpack will use production by default.Fordebugging, development optimises for quicker build times and codereadability. Production strives for the minimum possible build, whichnecessitates a longer build time to decode and reduce the code.Lastbut not the least, you must be conscious of browser support. Webpackis currently set to assist browsers that support ES5 and higher.Howdoes webpack work?Eventhe most basic web projects contain HTML, CSS, and JS. It can alsoinclude assets like typefaces, photos, and so forth. Establishing anindex.html file with the suitable CSS and JS links, as well as therequired assets, is a pretty standard webpack workflow. Additionally,if you have a large number of CSS and JS components that areinterdependent, they must be optimised and correctly grouped into asingle unit that is ready for launch.Webpackdepends heavily on setup to accomplish all of this. Although webpack4 happens to come with sensible defaults, you'll need a specific filetype 'webpack.config.js' for any project that isn't trivial.This file explains how the files, as well as assets, must beconverted or what output must be produced. This file can speedily bemonolithic, making it difficult to recognise how webpack works unlessyou understand the underlying concepts that underpin it.Webpackconstructs the dependency graph by starting from the entry points andresolving each module it confronts relying on the configuration. If amodule includes dependencies, the procedure is iterated for eachdependency till the traversal is complete. Webpack then combines allof the project's modules into a limited number of bundles generally just one  that the browser can load.Whyshould you use a webpack?Thereare several reasons for using Webpack. Given below are some of thereasons you must use Webpack for your projectItgives a modem system;Everyprogramming language designed for scale requires a module system.Webpack will give you a lot of support for your ES6-based modulesystem (it supports a large number of module system standards, butES6 is perhaps the most recent). Furthermore, because of the modulesystem, each file you generate will be a module that has its scope. Asa consequence, if you begin using ever more dependencies, thisbecomes even more efficient. This module streamlines the process ofhaving to download modules, so it's commonly used inframeworks/libraries. It will not only provide you with the benefitslisted above, but you will also gain a better understanding of howfront-end boilerplates perform behind the scenes. As a result,comprehending the modern front-end environment will be a breeze foryou.Totalcommand of the construction systemWheneveryou need to transpile your ES6+ code in older iterations to make yourJavascript code workable with previous browsers, you can use thismodule and choose various build systems that you'll require, likeusing Babel or Traceur via Webpack loaders. You have absolute controlover it in either case. This is advantageous because you'll be in aplace to steer your website in the right direction.Webpackmakes it easier to create single-page applicationsTheadvantages of using this module are clear, especially if you'reworking on single-page applications. You'll be able to easily createa single application once you've learned everything there is to knowabout webpack. This is particularly the case when using React becausethis module can use Babel and other transpilers to convert JSX syntaxinto comprehensible Javascript code.Whenusing Webpack, development time can be reducedThismodule's "Hot Module Replacement" characteristic has alsohelped to reduce development time. Since your page does not have toreload completely to represent your changes to the Javascript code,it has been shown to boost efficiency. It will not only pertain toJavascript but introducing CSS loaders to the webpack config wouldalso advantage your CSS code. As a result, your development time willbe significantly reduced.Howis Webpack different from Gulp, Browserfiy, Grunt?;Gruntand Gulp are just file-handling tools with no notion of a dependencygraph.Browserifyis primarily a tool for converting Node.js require() calls intobrowser-friendly calls. It's a dependency graph for the source codeonly. Some static assets can be managed with plugins like Parcelify,but you'll then go out of your way to make it function.Theconnection between Babel and Webpack;Babelis a translator that converts your 'fancy' (ES6+) JS code into'not-so-fancy' (ES5) code that can be understood by the browser(front-end) or Node.js (back-end).Whydo we use terms like browser and Node.js? We can't wait to try outthe newest and greatest features, even before they're officiallyrecognized. Babel is sometimes referred to as a transpiler because ofthis. It's important to note that Babel is popular for both front-endand back-end development.IfBabel becomes a JS translator, Webpack is a gigantic translator thatworks with a wide range of languages (or assets). Webpack, forinstance, frequently uses Babel as one of the jobs. Webpack, forexample, can gather all of your inline CSS designs in the Javascriptfiles and wrap them into a single file.Whatshould you know?Thereis a steep learning curve with Webpack. However, provided how muchtime and energy it can save in the long run, it's a tool worthknowing.Webpackwill not be able to solve all of your problems. It does, however,solve the bundling issue. That's one less thing to be concerned aboutduring the development process.FAQsWhencan I use Webpack?Youcan use Webpack when you are creating front-end applications;Whatissues does Webpack solve?Webpacksolves problems depending on their size and the technology usedthereCanWebpack compress images?Yes,it can ]