Why Webpack?

A lot of code is running on the client! The huge code library needs to be managed in an orderly manner, while the Module system Modulesystem provides the ability to split the code library into modules and use more JavaScript

More user interfaces provide services through modern browsers

Refresh the entire page as little as possible when providing services.

Therefore, a lot of code is running on the client! A large code library needs to be managed in an orderly manner, and the Module system "Module system" provides the ability to split the code library into modules 」

Faction of the module system

There are several criteria for defining the module and module Dependencies

Script label "No module system used 」

CommonJS

AMD

ES6 Module System

There are other...

Script tag

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 global objects.

Disadvantages:

Conflicts

Pay attention to the module loading sequence.

Module users need to break down module Dependencies

In large projects, there are many modules to be managed, making management difficult.

CommonJS: Synchronous require Method

In this way, use the synchronous require method to load a dependent module and return an interface. You can define the export object of the module by adding properties to the export object "exports" or assigning values to module. exports.

This method is usually used by NodeJS on the server side.

Advantages

Server-level code

Npm has many modules that use this style.

Easy to use

Disadvantages

The blocked loading method is not applicable to the network environment, and network requests are asynchronous.

Multiple modules are not loaded in parallel.

AMD: asynchronous require method other methods used in browser Environment module systems do not support synchronous require, but asynchronous require method is provided:

Advantages

Asynchronous request method in the Network Environment

Multiple modules can be loaded in parallel

Disadvantages

Additional encoding overhead. Poor readability

A bit like a temporary solution

Implementation: RequireJS

ES6 Module System

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

Advantages

Convenient Static Analysis

Future-oriented ES standards

Disadvantages

It takes some time for the browser to support this feature.

Currently, few modules are written in this way.

Objective Solution

Let developers select a module system and allow existing code libraries to run "even if they use other module systems 」.

Transmission

The module must be transferred from the server to the client before it can be executed by the client. There are two extreme transmission modes, both of which are widely used but not the best.

One module request

All modules are in one request

One module request

Advantage: only required modules are transmitted.

Disadvantage: excessive request overhead

Disadvantage: The program starts slowly due to a large request delay.

One request to all modules

Advantage: less request overhead and less latency

Disadvantage: modules that are not used are also downloaded to the client.

Multipart Transmission

In most cases, a more flexible transmission mode is required, which is between the two extreme situations:

When all modules are compiled, a series of modules are divided into a group of small chunks 」

Compared to all modules in one request, the multipart method changes network requests to more smaller and faster requests. When the program starts, the parts that are not required will be loaded only when necessary.

Compared to a single request module, this accelerates program initialization, but still allows you to get more code "reduce network request overhead" in actual use 」.

The developer determines how to split and where to split. Large Code libraries can be organized reasonably in this way.

Conclusion

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

Webpack is a JS module packaging tool that can be used to package the JS code library of a Web site or a third-party code library. Unlike RequireJs, which only supports AMD, NodeJS is CommonJS, and SeaJS only supports CMD, there are also ES6 modules... Webpack, which seem to be integrated into one, on which developers can flexibly encode based on their preferences.