1. Why do I need a packaging tool

Front-end development can not avoid will write a number of JS files, and they have a complex dependence on each other, if this time directly to the online version, the browser will launch HTTP requests to obtain resources every time it encounters a JS file, and then execute the code in accordance with this. If one of the files is delayed due to network problems, the entire page will be delayed, which is obviously not user-friendly.

At this point, we might as well just generate a JS file to reduce HTTP requests and render the page more smoothly. But this is very unfriendly to developers, this js file may have thousands of lines of code, early development and late maintenance are a big project.

So the role of webpack packaging tool is prominent, its core positioning is a static module packer, generally speaking, it will help us merge our JS files after development. This reduces the number of HTTP requests to the browser and keeps our development process intact.

2. What exactly does Webpack do during packaging

First, remember that WebPack does only one big thing: it builds a dependency graph recursively and packages to generate one or more bundles.

The specific separation can be roughly divided into the following seven steps:

Graph TD 1. Initialize parameters --> 2. Start compiling --> 3. Confirm entry --> 4. Compile module --> 5. Complete module compilation --> 6. Output resources --> 7. Output is complete

  1. Initialization parameters: Read and merge parameters from configuration files and shell statements to arrive at the final parameters.

  2. Start compiling: Initialize the Compiler object with the parameters obtained in the previous step, load all the configured plug-ins, execute the object’s run method, and start compiling.

  3. Define entry: Locate all entry files according to the entry in the configuration.

  4. Compiling modules: Starting from the entry file, call all configured Loader to translate the module, find out the module that the module depends on, and then recurse this step until all the entry dependent files have gone through this step.

  5. Complete module compilation: After using Loader to translate all modules in step 4, obtain the final content of each module after translation and the dependencies between them.

  6. Output resources: Assemble chunks containing multiple modules one by one according to the dependency between entry and module, convert each chunk into a separate file and output it to the list. This step is the last chance to modify the output content.

  7. Output complete: After determining the output content, determine the output path and file name based on the configuration, and write the file content to the file system.

3. What’s the difference between chunk and bundle?

1.chunk

Chunk is a collection of modules in the webpack packaging process, a concept in the packaging process. Webpack packaging starts with an entry file, which introduces other modules, which reference modules. Webpack packages modules one by one by reference, and these modules form a chunk. Of course, if there are multiple entry modules, there may be multiple packaging paths, each path will generate a chunk.

2.bundle

Bundles are one or more files that are exported after the package is complete.

Chunk is a chunk of code in the process of packaging, and bundle is a chunk of code in the output of packaging results. Chunk is presented as a bundle after the completion of the build.

##4. Some important concepts in Webpack

Webpack instance This object is instantiated when Webpack starts and is globally unique. Compiler pair contains all configuration information of the Webpack environment, including options, loaders,plugins and other information.

2.compilation compilation contains the current module resources, compilations, generated resources, and changed files. When WebPack is running in development mode, a new compilation is created whenever a change to a file is detected. The compilation object also provides many event callbacks for plug-ins to extend. Compiler objects can also be accessed through this compilation.

Module converter, convert non-JS modules into JS modules that can be recognized by WebPack. Loader can convert all types of files into modules that WebPack can handle, and then take advantage of WebPack’s packaging capabilities to process them. Essentially, WebPack Loader converts all types of files into dependency maps for the application.

4. Plugins Events are broadcast at each stage of the WebPack run, and plug-ins can listen to these events and handle them at specific times.

Loaders are used to convert certain types of modules, while plug-ins can perform a wider range of tasks. Plugins range from packaging, optimizing compression, to redefining variables in the environment.