Webpack catalog

  1. The core configuration of webpack5
  2. Webpack5 modularity principle
  3. Webpackage 5 with Babel/ESlint/ browser compatibility
  4. Webpack5 performance optimization
  5. Webpack5 Loader and Plugin implementation
  6. Webpack5 core source code analysis

How the Webpack command works

We usually start Webpack by configuring webpack commands in NPM scripts, such as build pack commands

"scripts" {
  "build": "webpack --config ./config/webpack.common.js --env production"
}
Copy the code

1. webpack/bin/webpack.js

When we install Webpack, there is a line of bin property in package.json of Webpack, so NPM will use the name of webpack property in bin as the file name. The new webpack.js file in the bin directory is copied to node_modules/.bin and installed

So when we execute the webpack command, we actually execute the webpack/bin/webpack.js file.

Take a look at webpack/bin/webpack.js

  1. I’m going to define onecliobject
  2. When the judgecliWithin theinstalledWhether the property istrue
  3. performrunCli

Webpack and webpack-cli will be installed at the same time. If not, the conditional installation will be executed. Otherwise, runCli will be executed

1. Perform runCli

Json: pkgPath is webpack-cli/package.json, PKG is webpack-cli/package.json. The corresponding value of the bin attribute in webpack-cli/package.json is bin/cli.js

So the final concatenated path is webpack-cli/bin/cli.js, which will call this file

2. webpack-cli/bin/cli.js

1. Perform runCLI

This file actually executes runCLI and passes in the parameters of the command

The reference that calls runCLI here comes from the bootstrap file, so let’s look at that file

3. webpack-cli/lib/bootstrap.js

1. A WebpackCLI object is created

2. Perform cli. Run

The WebpackCLI comes from webpack-cli.js

4.webpack-cli/lib/webpack-cli.js

The run method here mainly performs the following process

1. Perform makeCommand

To check whether some dependency packages exist

2. Perform makeOption

The makeCommand method executes the makeOption method, which further processes the parameters we pass in

3. Perform runWebpack

4. Perform createCompiler

CreateCompiler is mainly implemented in runWebpack

5. Perform webpack

CreateCompiler mainly calls the Webpack method, which comes from the WebPack package

At this point, the Webpack is already packed

How webpack Compiler is created

The compiler is created by executing the Webpack function. Let’s take a look at the Webpack method. Webpack from webpack/lib/webpack. Js

webpack/lib/webpack.js

As you can see in the Wepack method, create returns Compiler regardless of whether there is a callback

1. The create

In the create method, createCompiler is executed to create compiler

2. Perform createCompiler

While createCompiler primarily does

  1. newaCompilerobject
  2. plugin.applyAll plug-ins are registered
  3. Call theenvironmentandafterEnvironmentThe environmenthook
  4. callnew WebpackOptionsApply().processConvert configuration properties topluginregistered
  5. returncompiler

3. Perform compiler. Run

If there is a callback, compiler.run will be executed. If there is no compiler, we can pass in a callback method after executing webpack to get compiler. You can also call the run method.

webpack/lib/WebpackOptionsApply.js

1. Plugin.apply ()

In createCompiler in webpack, we call new WebpackOptionsApply().process

In fact, in the Process method, we inject the incoming properties into the WebPack plugin into the WebPack life cycle, as shown in the figure above, we import the built-in plugin if it exists (so the plugin actually runs through the entire WebPack build process). This method registers plugin.apply and passes in compiler objects. These plugins then use tapable to implement hook listening and their own processing logic

The execution principle of the RUN method in Compiler

webpack/lib/Compiler.js

In createCompiler, we create a Compiler object. What does this constructor do

The new Compiler constructor initializes various hooks that are registered with the Plugin in process. These hooks are managed by a library called Tapable, which is maintained by WebPack itself. For an introduction to the use of tapable, see the Loader and Plugin implementation of WebPack5 in my other Webpack article.

Now look at the run method in the Compiler, which essentially executes the hooks that the plugin registered earlier.

In Compiler, the run method defines a run method, so what do we do here

1. Perform the run

  1. It’s executed firsthooks.beforeRunTo perform some pre-run operationsplugin
  2. To perform thehooks.runDo something that needs to be run to start something that needs to be doneplugin
  3. performcompileMethod, and passed inonCompiledThe compiled callback

2. Perform the compile

When this.compile is executed, it is ready to compile. Let’s see what happens in compile

  1. performhooks.beforeCompile
  2. performhooks.compile
  3. performhooks.make
  4. performhooks.finishMake
  5. performhooks.afterCompile

Make is the final compilation, and the const compilation = this.newcompilation (params) is performed between hooks.compile and lattion.make; “And passed the compilation to lattions.make.

What is the difference between Compilation and Compiler here

Compiler

  • An object that is created when a WebPack is built and remains for the entire life of the WebPack(before - run - beforeCompiler - compile - make - finishMake - afterCompiler - done)
  • Whenever you do webpack compilation, you create one firstCompiler
  • If you modify the Webpack configuration, you need to re-configurenpm run build

Compilation

  • Exists in thecompile - makephase
  • watchThe source code, which needs to be recompiled to create a new one every time it changesCompilationobject

Compilation Handling of modules

Make is just a call to the hook. To find the callback registered on the hook, we can go to the entry plug-in new EntryOptionPlugin().apply(Compiler) in the process

1. webpack/lib/EntryPlugin.js

This plugin calls applyEntryOption in Apply, which in turn calls EntryPlugin

You can see that hooks. Make is registered in the EntryPlugin plug-in

In the registration callback, we basically do compilation. AddEntry, so let’s see what we’re doing in the compilation object

2. webpack/lib/Compilation.js

The compilation. AddEntry is basically done here

  1. perform_addEntryItemTo add an entry Item
  2. performaddModuleTree
  3. inaddModuleTreePerformed in thehandleModuleCreation
  4. inhandleModuleCreationPerformed in thefactorizeModuleTo addhookstofactorizeQueueIn the queue
  5. inhandleModuleCreationPerformed in theaddModuleTo addmoduleModule toaddModuleQueueIn the queue
  6. inaddModulePerformed in thebuildModule, will need to be builtmoduleAdd a module tobuildQueueIn the queue
  7. buildQueueThere’s one in the queueprocessorProperty, execute_buildModule
  8. _buildModulePerformed in themodule.needBuildDetermine whether the module needs to be built
  9. performmodule.build.
  10. Will end up inwepack/lib/NormalModule.jsPerformed in thebuildMethod to start building the module

Build phase of module

At the end of the processing module in the above wepack/lib/NormalModule js that executes the build method, start building module, now what we are doing to take a look at the build content

wepack/lib/NormalModule.js

1. Perform doBuild

2. Perform _doBuild

Execute the _doBuild method in doBuild

3. Perform runLoaders

Execute the runLoaders in _doBuild, which comes from the separate Loader-Runner library that handled the various Loaders we configured earlier

4. Perform processResult

The processResult callback is executed after runLoaders completes execution

5. Perform the parse

Parse is then called to parse the AST tree

The parse from webpack/lib/javascript/JavascriptParser parse in js

The parse actually uses the Acorn library to parse javascript

6. Perform handleBuildDone

After parsing, the handleParseResult callback is called, which executes handleBuildDone

HandleBuildDone executes the callback passed in to build

Eventually perform webpack/lib/Compilation. Js module. Under the build incoming callback

7. _buildModule execution complete

When _buildModule is complete, finally hooks. Make is complete, and the compiler. finish and compiler. seal methods for webpack/lib/Compiler.js are then executed

At the seal step, it is time to export the static resources to the build directory

Output static resources to the build directory

1. Perform hooks. OptimizeChunkModules

First the hooks optimizeChunkModules, module code before optimization

2. Perform codeGeneration

Perform codeGeneration and generate code

3. Perform createChunkAssets

Run the createChunkAssets command to createChunkAssets

4. Perform getRenderManifest

Execute the getRenderManifest within createChunkAssets to put all the data into a manifest object

5. Perform emitAsset

Execute emitAsset to output the resource, which is now in memory

6. Perform onCompiled

OnCompiled is executed after compile for the final Webpack /lib/Compiler

7. Perform emitAssets

The onCompiled callback executes emitAssets,

8. Implement hooks. Emit

Finally, execute hooks. Emit within emitAssets to export the resource to the build directory

At the end

Source code introduction may still lack of incomplete place, we can view the source code when vscode debugger tool, through the interruption point to view the code, through the above introduction should be able to roughly clarify the process of Webpack execution, but more details or hope we can debugger to explore more.