1. File analysis after Webpack packaging

2, single file package source debugging

3. Function description

4. CommonJS package

5. EsModule package

6. Handwriting function

When we use the webpack to packing, will eventually produce one or more target js file, and in the midst of these documents are mainly generated since a called function, since this call a function to receive an object as a parameter, defined it call module, keys as query module id, it will be its value as a function to perform, In the process of executing the function, the corresponding module content is loaded. Webpack also uses different tool methods for different module types, such as (R, T, n, d)

Lazy loading implementation process

Webpack and Tapable

Tapable is the underlying webPack library, and many functions are tied to it

These three processes can be thought of as a time-driven event flow mechanism. Complier, which is responsible for compiling, and Conmpilatuon, which is responsible for creating bundles, are all tapable instance objects.

conclusion

Tapable is a separate library that provides different classes internally and can then instantiate different hooks. Hooks can be divided into synchronous and asynchronous categories, and each category has four execution characteristics.

9 SyncHook.

Don’t understand,

10. Locate the Webpack entry

The handwritten packer needs to reproduce the hook

11. Compile the main process

EntryOptionPlugin performs analysis

13. Run analysis

14, compile analysis

15, Make a review of the future

A, steps,

  1. Instantiate the Compiler object (which will be used throughout the webPack work)
  2. The run method is called by compiler

Second, compiler instantiation operation

  1. 01 Compiler inherits Tapable, so it has the ability to manipulate hooks (listen for events, fire events, webpack is a stream of events)

  2. After instantiating the Compiler object, we attach many properties to it, among which NodeEnvironmentPlugin makes it capable of reading and writing files (our simulation uses node’s fs).

  3. After fs manipulation was enabled, plugins were mounted into compiler objects

  4. The internal default plug-in is related to the Compiler, where the EntryOptionPlugin handles the ID of the entry module

  5. Only the make hook (SingleEntryPlugin) was listened for when instantiating the Compiler.

  • 5-1 There are two hooks listening in the Apply method of the SingleEntryPlugin moduleCopy the code
  • 5-2 The Compilation hook gives the Compilation the ability to create a normal module using the normalModuleFactory factoryCopy the code
  • 5-3 Because it uses a self-created module to load modules that need to be packagedCopy the code
  • 5-4 The make hook is triggered in compiler.run, which means that all the preparation work for a module is completed before it executes packagingCopy the code
  • 5-5 addEntry method call ()Copy the code

3. Execute the run hook.

01 The run method is a bunch of hooks that are triggered in sequence (beforeRun run compile)

02 Compile method performs 1 to prepare parameters (where normalModuleFactory is what we will use to create modules later) 2 to trigger beforeCompile 3 to pass the parameters of the first step to a function, Start creating a compilation (newCompilation). 4 within the call to newCompilation – which calls createCompilation – this.compilation hook and The Make hook is triggered when the compilation object is created

We pass the compilation object when we trigger the make hook listener

Four,

1 instantiate compiler 2 call compile method 3 newCompilation 4 instantiate a compilation object (which is related to compiler) 5 trigger make listener 6 addEntry The method (in this case with a bunch of context name entries) runs to compile at…..

16. AddEntry analysis

The 01 make hook, when triggered, receives the compilation object implementation, which has a lot of content attached to it

/ SRC /index.js) name: main context: root path of the current project

03 DEP deals with dependencies in the current entry module

04 calls the addEntry method

The compilation instance had an addEntry method on it, and the _addModuleChain method was called internally to handle dependencies

06 Compilation We can create a normal module object using the NormalModuleFactory factory

In webpack 07, a 100 concurrent packaging operation is enabled by default, and currently we see normalModule.create().

08: beforeResolve will trigger a factory hook to listen on the loader.

09 After the above operation, we got a function stored in factory and called it

10 in this function call, a hook called resolver is raised.

After the resolver() method is called, the afterResolve hook will trigger the New NormalModule

12 After the above operation, the Module is saved and some other attributes are added

13. Call buildModule to start compiling. Call build doBuild

17, _addModuleChain

In the 18th and buildModule