This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

What is Webpack? What does it do?

Webpack is the most popular front-end resource modular management and packaging tool.

It can package many loose modules into front-end resources that are ready for production deployment according to dependencies and rules. You can also code separate modules that are loaded on demand and load them asynchronously when you actually need them. By loader conversion, any form of resources can be regarded as modules, such as CommonJs module, AMD module, ES6 module, CSS, image, JSON, Coffeescript, LESS and so on.

Webpack is a static module wrapper. When webPack is packaging, it starts from the entry, statically analyzes the dependencies of the modules, recursively builds a dependency graph that contains one or more modules corresponding to the application, and packages them into one or more bundle.js


  • 1. Package many loose modules into front-end resources that conform to production environment deployment according to dependencies and rules
  • 2. Separate the modules to be loaded on demand and load them asynchronously when needed
  • 3. Any form of resource can be regarded as a module through loader conversion

1. The core concepts of WebPack

(1) The entrance is at the entrance.

The Entry indicates to WebPack which file is the Entry point to start packaging and analyze the build internal dependency graph.

Output (export)

The Output indicates where the WebPack bundle Output goes and how to name it.


Loader allows WebPack to handle non-javascript files (WebPack handles JavaScript itself).


Plugins can be used to perform a wider range of tasks. Plug-ins can range from packaging optimizations and compression to redefining variables in the environment.


Mode instructs WebPack to use the configuration for the corresponding Mode.

options describe The characteristics of
development The value of process.env.node_env in DefinePlugin is set to development. Enable NamedChunksPlugin and NamedModulesPlugin. An environment where code can be debugged locally
production The value of process.env.node_env in DefinePlugin is set to production. Enable FlagDependencyUsagePlugin FlagIncludedChunksPlugin, ModuleConcatenationPlugin NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin and TerserPlugin. An environment that allows code optimization to come online

What is a Dependency graph?

From the entry point, WebPack recursively builds a dependency graph * that contains each module needed in the application, and then packages all modules into a small number of bundles.

2. Webapck execution process

The running process of Webpack is a serial process. From start to finish, the following processes are executed in sequence:

  • Initialization parameter: Reads and merges parameters from configuration files and Shell statements to get the final parameters
  • Begin to compile: Initialize the Compiler object with the parameters obtained in the previous step, load all configured plug-ins, and execute the run method of the object to start compiling
  • Determine the entrance: Finds all entry files according to the configuration entry
  • Compile the module: Starts from the entry file, calls all configured loaders to translate modules, then finds out which modules the module depends on, and repeats this step until all the entry files depend on have been processed in this step
  • Complete module compilation: After all modules are translated by Loader in step 4, the final content after each module is translated and the dependencies between them are obtained
  • Output resourcesAssemble the modules into chunks based on the dependencies between the entries and modules. Then convert each Chunk into a separate file and add it to the output list. This is the last chance to modify the output
  • Output complete: After determining the output content, determine the output path and file name according to the configuration, and write the file content to the file system

In the above process, Webpack will broadcast specific events at specific points in time, the plug-in will execute specific logic after listening to the event of interest, and the plug-in can call the API provided by Webpack to change the Webpack running result.

In a nutshell

  • Initialization: Start the build, read and merge configuration parameters, load Plugin, and instantiate Compiler
  • Compile: Start from Entry, call the corresponding Loader serial for each Module to translate the contents of the file, and then find the Module that this Module depends on, and compile recursively
  • Output: The compiled modules are combined into chunks, the chunks are converted into files, and the files are output to the file system

3. Differences between Loader and Plugin

Loader is essentially a function that converts the received content and returns the converted result. Because Webpack only knows JavaScript, the Loader acts as a translator, preprocessing other types of resources for translation.

Plugins are plugins that extend Webpack functionality based on the event flow framework Tapable. Plugins can listen for events that are broadcast during the life of Webpack. Change the output using the APIS provided by Webpack when appropriate.

Loader is configured in module.rules as the module resolution rule. The type is array. Each entry is an Object containing properties such as test(type file), Loader, and options (parameter).

Plugins are individually configured in an array of types, each of which is an instance of the Plugin, and arguments are passed in through the constructor.


Juejin. Cn/post / 684490… Juejin. Cn/post / 684490…