I spent three days revisiting WebPack and marveled that the configuration of WebPack was a hell of a lot of work, but I still had to go through the code line by line.

The core concepts of WebPack

  • Entry: the first Entry that WebPack performs a build, abstractly understood as input
  • Module: Module, in Webpack everything is a Module, a Module corresponds to a file, WebPack will start from the configuration Entry, recursively find all dependent modules.
  • Chunk: code blocks. A Chunk is a combination of multiple modules for code merging and splitting.
  • Loader: module converter used to convert the meta content of a module into new content as required.
  • Plugin: An extension that broadcasts corresponding events at specific times during the WebPack build process. Plugins can listen for these events and do corresponding things at specific times.

Webpack process

Webpack is a sequential process that follows from start to finish

  • Initialization parameters: The final parameters are obtained by combining shell parameters with configuration file parameters
  • Start compiling: Initialize the Compiler object with the parameters obtained from the previous step, load all the plug-ins, and compile using the Run method.
  • Identify entry: Locate all entry files according to the entry of the configuration file.
  • Compile modules: from the entry file, call all configured Loaders to translate modules into compliation, then recurse all dependent modules, then repeat the compilation. Get the translated final content of each module and the dependencies between them.
  • Output resources: Assemble chunks containing multiple modules according to the dependencies of the entry and module, and then convert the chunk into a separate file and add it to the output list. This is the last chance to modify the output content
  • Output complete: After determining the output content, determine the output path and file name based on the configuration, and write the content of the file to the file system.

In the above process, WebPack broadcasts specific events at specific points in time, and the plug-in executes specific logic by listening for events of interest and changing the results of The WebPack run.

Normally we have multiple configuration files in WebPack.

  • The configuration of dev development version mainly focuses on hot-reload to improve development efficiency.
  • Production online version, mainly focuses on JS and CSS compression
  • Test is not currently configured but is primarily unit and integration testing.

What’s hard about WebPack configuration?

These days webpack configuration learning, the biggest feeling is cumbersome, before the community has also discussed the complexity of webpack configuration is outrageous, the lack of a certain default options, complex community plug-ins, the compatibility of different plug-in versions are extremely troublesome problems. Webpack 4.0 has also been improved, adding a lot of default options, but the problem is that the current project is using Webpack 3.12.0, we need a WebPack configurator to help us upgrade to V4.0