Advanced front-end interview questions often include:

  1. Talk about the difference between loader and plugin
  2. What is the WebPack build process like
  3. Write the idea of webpack loader
  4. The idea of writing the Webpack Plugin

Some of the answers are available online, but I’ve read them all and they’re either too superficial to read or too long to read.

If the salary of the interview position is more than 20K, the interviewer will surely ask for further information.

So I spent a week going through the Webpack 5 source code line by line to sort out the main threads. I recorded a video of the whole reading process, which is less than 3 hours long, but it covers the overall architecture of Webpack, packaging ideas, loader implementation ideas, Plugin implementation ideas, parser running process, etc. The most important thing is that you will master the “skills of reading source code” through the video.

Here is the text tutorial:

How does webpack-CLI call Wepack

webpack = require('webpack')
compiler = webpack(options, callback)
Copy the code

Hooks. XXX. Call what

Tapable is an event/hook library written by the WebPack team for writing Webpacks

usage

EventName = new SyncHook(["arg1", "arg2"]); Listen to this. An event/hook hooks. EventName. Tap (' listen to reason, fn) triggered this. An event/hook hooks. EventName. Call (arg1, arg2 ' ')Copy the code

What is the overall flow of Webpack

At least have hooks such as env init run beforeCompile compile compilation make finishMake seal optimize afterCompile emit

At what stage do I read index.js and analyze and collect dependencies?

Make-finishmake phase

Between make-finishmake, what does it do

  • A search for make. Tap shows that many places listen for make events
  • Following our intuition, we opened the EntryPlugin directly
  • The addEntry function of EntryPlugin is one of the most important things in the make phase

What is factory in factory.create?

Where does this factory come from?

It comes from factorizeModule(options’ options.factory.

Where did the options.factory come from?

It is from the moduleFactory.

Where does the moduleFactory come from?

It is to use this. DependencyFactories. Get (Dep).

This. DependencyFactories. Get (Dep) is a what?

If you search compiler.tap, it’s normalModuleFactory, or NMF for short

Teacher, how the fuck did you know to search for this?

I searched all the hooks for half an hour, and you didn’t know that?

Conclusion: Factory is NMF, so factory.create is NMF. Create

What does NMF.Create do?

  • Nmf.create gets a Module object
  • The next steps are addModule and buildModule

What does addModule do?

  • Add module to compiler.modules as in the previous tutorial
  • It also prevents duplication by checking the ID

What does buildModule do?

  • It calls module.build().
  • Go to normalModule. js and look at the build source and find runLoaders
  • Then come to processResult() and find _source =… And _ast = null
  • What is this supposed to do? _source will be changed to _ast!
  • Go to the doBuild callback and find this.parser.parse()!
  • Parse transforms code into an AST
  • What is Parser and where is the source for Parse ()?
  • If we continue to follow the code, we will find that parser comes from the Acorn library, which requires knowledge of compiling principles
  • If you want to learn how to build, you can buy my course

How does Webpack know which files index.js depends on

  • BlockPreWalkStatement () checks the ImportDeclaration
  • Once import ‘XXX’ is found, the hook is fired and the corresponding listener handles the dependency
  • WalkStatements () checks ImportExpression
  • Once an import(‘ XXX ‘) is found, the hook is fired and the corresponding listener handles the dependency
  • I’m not talking about require, but you can do it yourself if you’re interested

How does Webpack merge Modules into a single file?

  • Look at compilation.seal(), which creates chunks, cobugs for each chunk, and then creates assets for each chunk
  • After seal(), emitAssets() and emitFiles() will create the file (emit means shoot).
  • You end up with dist/main.js and other chunk files

This year, I’ll be reading up on the source code for more front-end projects and making new video courses, so stay tuned.

If there are any open source projects you want to know about, feel free to leave a comment.

To the end.