An overview of the

  • This article focuses on why WebPack was born and what problems WebPack solves.
  • What is the Loader, plugin in WebPack? How does it work? Can you build your own loader or plugin
  • How does WebPack pack files? What is an AST abstract syntax tree?
  • How does WebPack manage interaction between packaged modules? What are the WebPack Runtime and manifest?
  • How does the hot update process work in the actual development where we modify a file and the page changes accordingly?
  • What are the shortcomings of WebPack?

Why WebPack was born

  • How do you develop complex features early on
    1. Recall that when we first learned JS, the browser needs to load JS files through script tags to run, and complex functions need to be separated into different JS files, so it needs to load many JS files, which will lead to network bottlenecks. PS: Chrome can concurrently request up to 6 network requests in a task cycle
    2. If you write all the functionality in a JS file, maintenance and development costs are bound to get higher and higher

When WebPack came along, what did it solve?

  1. Webpack was born after node. js was released, and CommonJS was proposed to solve the problem of modularity. However, browsers do not directly support CommonJS syntax, so require and Browserify are used for translation.
  2. Webpack will provide the Node environment, support for CommonJS and ESM specifications, and support for any module format. Make developers only focus on business development, do not care about module compatibility in the browser. PS: As long as you provide the corresponding loader for different modules, Webpack can be converted into the browser can directly run JS files
  3. The ESM is an official JS solution to the modular problem, which is supported by most advanced browsers today. The core concept of the Vite build tool is also the ESM. Its core theme is that you don’t need to load the JS file of the whole project, when the page content needs which module’s JS file will initiate the JS file loading request, and will cache. This approach can greatly improve project loading speed.

What is the Loader, plugin in WebPack?

  • As mentioned above, WebPack can package code in different file formats. After being processed by WebPack, it can be run directly in the browser, but it cannot be enhanced. This is what loaders are for, such as Sass-Loader, which parses sass files.
  • Loader can be interpreted as the school, no matter where you come from, you will be given the same uniform when you go out. This uniform is the browser running JS.
  • A plugin is a plug-in that enhances functionality and complements a loader, such as Axios. Like equipment in the game, game characters with different equipment, damage will be different, skills are also cooler.
  • Loader loads it during the generation of the AST abstract syntax tree, which is used to parse content in different formats. The loading time of plugins varies because webPack builds broadcast at specific times and specify certain plugins. The specific time is automatically recognized by WebPack, so the loading time of the plugin is not always the same.

How does WebPack pack files? What is an AST abstract syntax tree?

  • In the webpack.config.js configuration file, the entry is the webPack packaging entry, but some scaffolding will hide this file in the higher version, to configure to create this file first.
  • You can configure multiple webPack entry files. For details, see webPack entry Starting point on the official website
 module.exports = {
    entry: './path/to/my/entry/file.js'
};
Copy the code
  • What is the WebPack packaging process? What is an AST abstract syntax tree? What does Loader have to do with it?
    1. Get specific keywords: WebPack reads the entry file from the entry file and reads the contents of the file (PS: this is a read-only process). It performs lexical analysis as it reads, such as some keywords let, var, impotant……
    2. Lexical analysis: After obtaining a specific lexical analysis, how to determine the corresponding meaning of the expression, here the loader is used to give meaning to the resulting lexical analysis. For example, the assignment of the value, the reference of the file reads the file according to the file path.
    3. Generate an AST abstract syntax tree:. After the lexical analysis, the AST abstract syntax tree is generated. In other words, starting from the entry file, loader processes it, and finally gets a tree structure that reflects the dependencies between the files.
    4. After the chuck: AST abstract syntax tree is generated, WebPack will generate multiple chunks based on their dependencies, and each chunk will be generated into a file. The generated file is a file that can be packaged and run directly in the browser. Outputs the file according to the exit set by output.
  • Abstract syntax tree (AST

How does WebPack manage interaction between packaged modules?

  • As mentioned above, the webPack packaging process generates chunks. How are the dependencies and interactions between these chunks implemented?
    1. Runtime: Manages and determines dependencies between chunks or packaged files. It functions as a map and knows the relationships between chunks.
    2. Manifest: Runtime uses the Manifest to parse and load modules when a WebPack-packed file is sent to the browser. By using the data in the MANIFEST, Runtime will be able to retrieve these identifiers and find the corresponding module behind each identifier.
  • For example, Runtime is used to retrieve maps, and manifest is used to retrieve names of different chunks or files.
  • PS: The official explanation

What is webPack’s hot update mechanism?

  • If you don’t know what a hot update is, go to the website and read the explanation.

How do I check if the code has changed?

  1. The application asks HMR Runtime to check for updates.
  2. HMR Runtime asynchronously downloads updates and then notifies the application.
  3. The application requires HMR Runtime to apply the update.
  4. HMR Runtime applies updates synchronously.
  • For example:
    1. The application asks WebPack to check if the contents of any place names have changed
    2. If webPack finds one, it records the change and notifies the application at the same time. “Hey, apps! There’s something going on here, it’s not the same as before, it’s asynchronous. If not, there is no follow-up.
    3. The app gets the message and says, “I know, you update the situation and give it to me.”
    4. When WebPack receives it, it starts synchronizing the update and sends the resulting new results to the application.
  • PS: Webpack module hot replacement

What are the shortcomings of WebPack?

  • I’m sure you have an idea of how Webapck packaging works, but in the actual development process why is it so slow to start a large project built with Webapck? Update a fast code and the hot update rate is slow?
  • This is because WebPack packages the project files before sending them to the browser, and the packaging process takes time. When you change the code, you don’t just update this place, you update this file, and if there are references to this file, you repackage the updates. That’s why it’s slow, why it’s slow to update.
  • PS: The core idea of the Vite build tool is ESM, build and update speed is a P. Webpack development may also be able to browse the circle of friends, Vite is a conscientious professional! Vite will be introduced later, please look forward to it.