Moment For Technology

The essence of webpack | webpack talk

Posted on Aug. 5, 2023, 9:11 a.m. by Jhanvi Loke
Category: The front end Tag: The front end webpack

This is the 26th day of my participation in Gwen Challenge

[Webpack series of articles in serial...]

1. The concept

Webpack is a static module bundler for modern JavaScript applications. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles.

2. The role

Webpack can support modules written in various languages and preprocessors via loader (non-javascript modules are handled by Loader and dependencies are introduced in bundles). Modules can express their dependencies in the following ways:

1. ES2015 import statement 2. CommonJS require() statement 3. AMD define and require statement 4. Style (url (...). ) and HTML files (img SRC =...  image link inCopy the code

Nature of 3.

Webpack can be thought of as an event-based programming paradigm where a series of plug-ins run and Tapable implements the plug-in mechanism.

1. What is Tapable?

Tapable exposes a number of Hook classes that you can use to create hooks for plug-ins.

Tapable is a library similar to EventEmitter from Node.js that controls the publishing and subscribing of hook functions and the plugin system for Webpack.

npm install --save tapable
Copy the code

A simple example of the Node.js event mechanism:

Const EventEmitter = require('events'); const emitter = new EventEmitter(); / / listen for an event emitter. On (' start '() =  {the console. The log (' start')}) / / trigger event emitter. The emit (' start ')Copy the code

2. Tapable Hooks type

Tapable exposes the following Hook classes for plugins to mount:

Const {SyncHook, // SyncBailHook, // SyncWaterfallHook, // SyncLoopHook, // AsyncParallelHook, // AsyncParallelBailHook, // AsyncParallelBailHook, // AsyncSeriesHook, // AsyncSeriesWaterfallHook} = require("tapable");Copy the code

These hooks can be classified as follows:

Waterfall: If the function returns any value, it will stop the current executing function. Loop: If the function returns true to indicate that it continues the Loop, and if it returns undefined to indicate that the Loop ends, Sync: Synchronous method AsyncSeries: asynchronous serial hook AsyncParallel: asynchronous parallel execution hookCopy the code

4. Build process

  1. Initialization parameter

Read and merge parameters from configuration files and Shell statements to arrive at the final parameters.

  1. Begin to compile

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

  1. Determine the entrance

Locate all entry files according to the entry in the configuration.

  1. Compile the module

Starting from the import file, call all configured Loader to translate the module, find the module that the module depends on, and then recurse this step until all the import dependent files are processed in this step.

  1. Complete module compilation

After using Loader to translate all modules in Step 4, the final content of each module after translation and the dependencies between them are obtained.

  1. Output resources

According to the dependency relationship between the entry and modules, the Chunk is assembled one by one containing multiple modules, and then each Chunk is converted into a separate file and added to the output list. This step is the last chance to modify the output content.

  1. 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.

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

5. Implement simple Webpack

Compiler and Plugin to simulate Webpack

// Tapable use: Compiler. Js const {SyncHook} = require("tapable"); module.exports = class Compiler{ constructor(){ this.hooks = { // 1. Init :new SyncHook(['start']),}} run(){// 3. Plugin.js class plugin {constructor(){} apply(compiler){// 2. Tap ('start',()={console.log(' Compiler start')})}} // Emulates webpack.js const options = { plugins:[new Plugin()] } const compiler = new Compiler() for(const plugin of options.plugins){ if(typeof plugin==='function'){,compiler) }else{ plugin.apply(compiler) } } the code

6. Summary

Now you've learned the nature of Webpack.

About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.