What is webpack

Webpack is a module bundler for the largest single-page web applications that can be bundled with a separate task runner that can handle JavaScript, CSS, and more. webpack is a great addition to a front-end developer's toolset. With webpack, web development is faster, more efficient, and more fun.

What is a module bundler?

In most programming languages, we can split the code into multiple files and import these files into the application to use the functionality contained within them. This is not built into the browser, so building module bundlers will provide this functionality in various forms: by loading modules asynchronously and running them after loading; or by combining all required files into a single JavaScript file , loaded through the tag in HTML.

Without module loaders and bundlers, we could always manually combine files or load HTML into countless tags, but this has several disadvantages :

1. We need to keep track of the correct order in which files should be loaded, including which files depend on which other files, and ensure that any files that are not needed are not included.

2. Multiple tags mean calling the server multiple times to load all the code, which is worse for performance.

3. It requires a lot of manual work instead of letting the computer do it for you.

Why choose Webpack?

Choose Webpack for the following reasons:

1. It is relatively new because it can solve or avoid the shortcomings and problems that appeared in its predecessors.

2. Getting started is very simple. If we just want to bundle a bunch of JavaScript files together without any other bells and whistles, we don't even need a config file.

3. Its plug-in system enables it to do more, making it very powerful. So it's probably the only build tool we need.

Execution process of Webpack

##Webpack starts working from entries, usually these are JavaScript module where webpack starts its traversal process. During this process, webpack evaluates entry matches against loader configurations, which tell webpack how to transform each match.

Parsing process

The entry itself is a module. When webpack encounters an entry, webpack attempts to match the entry to the file system using the entry's resolve configuration. In addition to node_modules, we can also tell webpack to perform lookups in specific directories. It is also possible to adjust how webpack matches file extensions, and specific aliases can be defined for directories. The Depletion and Packaging chapter covers these ideas in more detail.

If parsing fails, webpack will raise a runtime error. If webpack manages to parse the file correctly, webpack will perform processing on the matching file according to the loader definition. Each loader applies specific transformations to module content.

How the loader matches parsed files can be configured in a variety of ways, including file type and location in the file system. Webpack's flexibility even allows us to apply specific transformations to files based on where they are imported into the project.

Perform the same parsing process for webpack's loader. Webpack allows us to apply similar logic when determining which loader should be used. For this reason, the loader has already parsed its own configuration. If webpack cannot perform a loader lookup, a runtime error will be thrown.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.