Shulou(Shulou.com)06/02 Report--

Xiaobian to share with you the packaging principle of webpack, I hope you have something to gain after reading this article, let's discuss it together!

Webpack packaging principle is to static analysis of files according to their dependencies, and then these modules according to the specified rules to generate static resources, when webpack processing program, will recursively build a dependency graph, which contains each module required by the application, and then package all these modules into bundles.

Files are statically analyzed for dependencies between them, and then these modules are generated into static resources according to specified rules. When webpack processes an application, it recursively builds a dependency graph containing each module required by the application, and then packages all these modules into one or more bundles.

Webpack is simply a mechanism for packaging modules, transforming dependent modules into static files that represent those packages. It's not a modular specification like commonjs or amd. Webpack is the entry file that identifies you. Identify your module dependencies and package your code.

Whether your code uses commonjs or amd or es6 imports. Webpack analyzes it. to capture code dependencies.

What webpack does is analyze code. Translate code, compile code, output code. webpack itself is a module of a node, so webpack.config.js is written as commonjs (modularity in nodes is commonjs specification)

Each module in a webpack has a unique id that increments from 0. The entire packaged bundle.js is an anonymous function self-executing. The parameter is an array. Each element of the array is a function. The contents of function are the contents of each module and arranged in the order required.

Additional information:

Webpack core concepts:

1、Entry

The entry point indicates which module the webpack should use as a starting point for 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 processed and eventually exported to files called bundles.

2、Output

The output attribute tells webpack where to output the bundles it creates and how to name them, default is./ dist。Basically, the entire application structure is compiled into a folder in the specified output path.

3、Module

Modules, everything in Webpack is modules, and a module corresponds to a file. Webpack recursively finds all dependent modules starting with the configured Entry.

4、Chunk

Code block, a Chunk composed of multiple modules, used for code merging and splitting.

5、Loader

The loader enables webpack to handle non-JavaScript files (webpack itself understands JavaScript).

The loader converts all types of files into valid modules that webpack can process, and then processes them using webpack's packaging capabilities.

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

After reading this article, I believe you have a certain understanding of "webpack packaging principle". If you want to know more about it, please pay attention to the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.