Webpack Learning-Dependency graph (Dependency graph) and building goals (Targets)

Dependency Graph

At any time, a file depends on another file, and Webpack this as a dependency between the files . This allows Webpack to receive non-code resources (Non-code Asset) (example or Web fonts), and can use them as dependencies to provide to your application.

Webpack start with a list of modules defined in the command line or configuration file to process your application. Starting from these entry points , Webpack constructs a dependency graph recursively, which contains each module required by the application, and then packages all of them into a small bundle -usually only one- Can be loaded by the browser.

For http/1.1 clients, it is particularly powerful to package your application by Webpack, because it reduces the time that the application has to wait when a new request is initiated by the browser. For HTTP/2, you can also use code splitting and webpack packaging for optimal optimization.

Build Target (Targets)

Because both the server and browser code can be written in JavaScript, Webpack provides a variety of build targetsthat you can set in your webpack configuration.

usage

To set a target property, you only need to set the target value in your webpack configuration.

Webpack.config.js

In the example above, the use node of Webpack will be compiled for the class node.js"environment (using node. js require instead of using any built-in modules (such as fs or path ) to load chunk).

multiple Target

Although Webpack does not support the target passing of multiple strings, you can create a homogeneous library by packaging two separate configurations:

Webpack.config.js:

Webpack Learning-Dependency graph (Dependency graph) and build target (Targets)