There are many kinds of packaging tools. In practice, webpack is often contacted. At present, some Chinese documents are not in line with English documents, and some concepts are relatively scattered. Therefore, we should focus on this.
- My GitHub
Whenever one file depends on another, webpack treats this as a dependency. This allows webpack to accept non code resources, such as images or fonts, and provide them as dependencies to your application.
When webpack processes your program, it may start with a series of modules defined on the command line or configuration file. Starting with the entry file, webpack recursively builds aDependency graph(dependency graph), thisDependency graphContains each module required by the application and generates one or more
bundle, which can be loaded by the browser.
manifestData, basically all the code that webpack uses to connect modular applications when the browser is running.
- It contains the loading and parsing logic required to connect modules as they interact. This includes the logic to connect modules that have been loaded into the browser and to delay loading modules that have not yet been loaded.
manifestAs a noun, the Chinese meaning is: a manifest of a ship or an airplane
- When the compiler enters, parses, and maps your application, it keeps detailed information on all your modules. This data set is called“
- When the package is complete and sent to the browser,
manifestTo parse and load modules.
- Whatever module syntax you choose, those
requireStatements are now converted to
__webpack_require__Method, which points to the module identifier.
- The function of separated chunks with smaller contact surface than the complete program makes verification, debugging and testing easy.
- Well written modules provide reliable abstraction and encapsulation boundaries, which form a coherent design and clear purpose.
- As a noun, it means: (1) bundle, pack, tie.
- Generated from a number of different modules, containing the final version of the source file that has been loaded and compiled.
- Personal understanding is that some associated packages are packaged into a file.
- As a noun, it means: chunk, chunk, discourse component.
- Specific terms in this webpack are used internally to manage the packaging process.
chunksComposition, where there are many types (such as entrances).
bundlesDirect correspondence, however, some configurations do not produce a one-to-one relationship.
- This process provides a way to optimize the build, allowing webpack to generate multiple
- It can isolate each package’s changes without affecting other packages.
- By using the browser’s cache, the amount of code that needs to be redistributed and downloaded by the client can be reduced.
Dividing code into different
bundles/chunks, you can then load on demand instead of loading a single, all inclusive
- Eliminate redundant and unused code.
- Webpack analyzes the use of various import statements and import codes to determine the actual use of dependencies, and delete the part that does not belong to “tree”.
Webpack provides a way to usesubstitution(replaceable template string), template the file name through the bracketed string.
|[hash]||Hash of the module identifier. If a module is modified, the hash generated by other modules will change.|
|[contenthash]||The hash of the file content is different from each other. Only the hash of a file that has changed its content will change.|
|[chunkhash]||Hash of chunk content. If a file changes, its associated file hash will also change.|
|[name]||The name of the module|
|[query]||Query of the module, such as the string after the file name|
|[function]||Method to return the file name|
- Webpack Glossary
- What are module, chunk and bundle in webpack?