Moment For Technology

Webpack 5 - Why WebPack

Posted on Aug. 5, 2023, 6:42 a.m. by Aarush Rao
Category: The front end Tag: webpack

Welcome to wechat public account: Front Reading Room

Why Webpack

To understand why we want to use WebPack, let's take a look back at how we used JavaScript on the Web before packaging tools came along.

There are two ways to run JavaScript in a browser. The first way is to reference some script for each function. This solution is difficult to scale because loading too many scripts can cause network bottlenecks. The second way is to use a large.js file that contains all the project code, but this can cause problems with scope, file size, readability, and maintainability.

Invoked Function Expression (IIFE) - Immediately Invoked Function Expressions

IIFE addresses scope issues for large projects; When script files are encapsulated inside IIFE, you can safely concatenate or combine all files without worrying about scope conflicts.

IIFE is used to produce tools such as Make, Gulp, Grunt, Broccoli or Brunch. These tools, called task executors, splice all the project files together.

However, modifying a file means that the entire file must be rebuilt. Concatenation makes it easy to reuse scripts across files, but it makes it more difficult to optimize the build results. How do YOU tell if the code is actually being used?

Even if you only use one of the functions in LoDash, you must include the entire library in the build result and then compress them together. How does treeshake code depend on? Lazy-loading blocks of code are difficult to implement on a large scale and require a lot of manual work by developers.

Thanks to Node.js, JavaScript modules were born

Node.js is a JavaScript runtime that can be used on computers and servers outside of the browser environment. Webpack runs in Node.js.

When Node.js was released, a new era began, and it brought new challenges. Since you're not running JavaScript in a browser, there are no HTML files or script tags you can add to the browser. So how does a Node.js application load a new chunk of code?

CommonJS came out and introduced the require mechanism, which allows you to load and use a module in the current file. The ability to import every module we need, right out of the box, helps us solve the scope problem.

NPM + Node.js + modules - Mass distribution modules

JavaScript has taken over the JavaScript world as a language, a platform, and a way to quickly develop and create fast applications.

But CommonJS doesn't have browser support. There is no live binding. Circular references have problems. Synchronously executed module resolution loaders are slow. While CommonJS is an excellent solution for Node.js projects, browsers don't support modules, resulting in packaging tools like Browserify, RequireJS, and SystemJS that allow us to write CommonJS modules that run in browsers.

Esm-ecmascript module

The good news from the Web project is that modules are becoming an official feature of the ECMAScript standard. However, browser support is incomplete and versions are not iterated fast enough, and the implementation of the earlier modules above is still recommended.

Rely on automatic collection

Traditional task building tools like the Google-based Closure compiler require you to manually declare all dependencies at the top. However, packaging tools like WebPack automatically build and infer dependent graphs based on what you reference or export. This feature, along with others such as plug-ins and loaders, makes the developer experience better.

It doesn't look very good...

Can there be a way that not only lets us write modules, but also supports any module format (at least until we get to the ESM) and can handle resources and assets at the same time?

That's why WebPack exists. It is a tool to package your JavaScript applications (ESM and CommonJS support) that can be extended to support many different static resources, such as images, Fonts and stylesheets.

Webpack cares about performance and load time; It is always improving or adding new features, such as asynchronously loading chunks and prefetching, to provide the best experience for your project and your users.

Welcome to wechat public account: Front Reading Room

About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.