Why use Webpack

Use more JavaScript

More user interfaces are served through modern browsers

The page refreshes the entire page as little as possible during the service process

So now the website has a lot of code running on the client! A huge code base needs to be managed in an orderly manner, and the module system "Module system" provides the ability to divide the code base into modules "Module"

Factions of the module system

Definition of modules and module dependencies There are several standards for methods

tag "without using the module system"

CommonJS

AMD

ES6 module system

and others...

script tag

This This method does not use any module system. Each module exports an interface to the global object "for example, window object". Other modules access this interface through the global object.

Disadvantages:

Easily cause conflicts

Need to pay great attention to the order of module loading

Module users need to decompose module dependencies

In large projects, there are many modules that need to be managed, and management is very difficult

CommonJS: Synchronous require method

This method uses the synchronous require method to load a dependent module and return an interface. You can define the export object of the module by adding attributes to the export object "exports" or assigning a value to module.exports.

This method is usually used in server-side NodeJS

Advantages

You can make use of server-level code

Suitable for network environment, network requests are asynchronous

When loading multiple modules, there is no parallel loading

AMD: The asynchronous require method is applied to the browser environment module system. It does not support synchronous require, but provides an asynchronous require method. ：

Advantages

Comply with asynchronous request method in network environment

Multiple modules can be loaded in parallel

Disadvantages

Additional coding overhead. Poor readability

A bit like a temporary solution

Implementation: RequireJS

ES6 module system

ECMAScript 2015 "6th Edition" provides some language structures for JavaScript to form another module system

Advantages

Facilitates static analysis

Future-oriented ES standard

Disadvantages

It will take some time for browsers to support this feature

There are still relatively few modules written in this way

Objective solution

Let Developers choose a module system that allows existing code bases to run "even if they use other module systems."

Transmission

The module needs to be transmitted from the server to the client before it can be executed by the client. There are two extreme transmission methods, both of which are widely used, but neither is optimal

One module requests at one time

All modules request at one time

One module requests at one time

Advantages : Only the required modules will be transferred

Disadvantages: Excessive request overhead

Disadvantages: The request delay is large, causing the program to start slower

Requesting all modules at once

Advantages: The request overhead is relatively small , less delay

Disadvantages: unused modules are also downloaded to the client

Fragmented transmission

In most scenarios, a more flexible transmission method is needed, which is between the above two Between extreme cases:

When compiling all modules, decompose a series of modules into a set of small shards "chunks"

Compared with requesting all modules at once, the sharding method makes the network requests become multiple smaller and more frequent Quick request. When the program starts, fragments that are not needed will be loaded when needed. Compared with requesting one module at a time, this speeds up the initialization of the program, but still allows you to obtain more code during actual use and "reduce network request overhead."

How to shard and where to shard is decided by the developer. Large code bases can be organized in this way.

Conclusion

For the above two major themes, Webpack supports multiple module system styles and supports flexible chunk transmission "Code Split".

Webpack is a JS module packaging tool that can be used to package the JS code library of a Web website or a third-party code library. Unlike RequireJs, which only supports AMD, NodeJS is CommonJS, SeaJS only supports CMD, and now there is also ES6 Module... Webpack is like an all-in-one, and developers can flexibly code according to their own preferences.