What is the packaging principle of webpack?

The webpack packaging principle is to statically analyze the dependencies between files, and then generate static resources from these modules according to specified rules. When webpack processes the program, it will recursively build a dependency graph, in which Contains every module your application needs, and then packages all these modules into a bundle.

will statically analyze them based on the dependencies between files, and then generate static resources from these modules according to specified rules. When webpack handles the program, it will be recursive Build a dependency graph that contains every module your application needs, and then package all these modules into one or more bundles.

Webpack is just a mechanism for packaging modules. It just converts dependent modules into static files that can represent these packages. It is not a modular specification such as commonjs or amd. webpack identifies your entry file. Identify your module dependencies to package your code.

As for whether your code uses commonjs, amd or es6 import. webpack will analyze it. to obtain the code's dependencies.

What webpack does is analyze the code. Convert code, compile code, output code. Webpack itself is a module of node, so webpack.config.js is written in the form of commonjs (modularization in node is standardized by commonjs)

Each module in webpack has a unique id, which is from Increasing starting from 0. The entire packaged bundle.js is an anonymous function that executes itself. The parameter is an array. Each item in the array is a function. The content of function is the content of each module, and is arranged in the order of require.

Extended information:

webpack core concepts:

1, Entry

entry The entry point indicates which module webpack should use to start building its internal dependency graph. After entering the entry point, webpack will find out which modules and libraries the entry point depends on (directly and indirectly). Each dependency is then processed and output into files called bundles.

2. Output

The output attribute tells webpack where to output the bundles it creates and how to name these files. The default value is ./dist. Basically, the entire application structure will be compiled into the folder of the specified output path.

3. Module

Module, everything in Webpack is a module, and a module corresponds to a file. Webpack will recursively find all dependent modules starting from the configured Entry.

4. Chunk

Code block. A Chunk is composed of multiple modules and is used for code merging and splitting.

5. Loader

loader allows webpack to process non-JavaScript files (webpack itself only understands JavaScript).

Loader can convert all types of files into valid modules that webpack can process, and then you can use webpack's packaging capabilities to process them.

Essentially, the webpack loader converts all types of files into modules that can be directly referenced by the application's dependency graph (and ultimately the bundle).

The above is the detailed content of What is the packaging principle of webpack?. For more information, please follow other related articles on the PHP Chinese website!