Webpack wheel building opening: wheel architecture

This is the first article in this column , It's also a new one webpack The beginning of the wheel .

1. The importance of wheels

Why repeat the wheel ？ especially webpack Such a complex building system , So many ecological chains , Certainly not as good as the existing ones . Yes , I know my strength is not enough to make better wheels at present , Maybe even just a simple wheel , Can't carry too much weight on the wheel . But I don't think it's important , The process of making wheels , It's a summary + The rising process . When you realize it yourself , Not only can we have a deeper understanding of the bottom of the framework webpack The underlying principle of , Yes webpack Have a deeper understanding of , Of it plugins and loader Be able to know the root , Of it hotLoad Be able to understand its principle , Moreover, the short board of this mode may be found when making wheels . I think that's the essence of making wheels , At present, being able to reach this stage is also a phased victory .

The features of this column

In this column , Try not to analyze directly webpack Source code , I hope I can analyze why the authors do this , If you want me to do , What should I do? , Then on this basis , An important interpretation of the source code .

therefore , I may keep nagging about some concepts , Constantly nagging about some logic , It is possible that the code written will also be overturned and redone . But it's not that important , What is important is the process of constant quantitative change to qualitative change , In the Middle East: , It is also the process of my own continuous improvement .

The construction methodology of the wheel

What is considered is by face and point , Then point and face , It's probably divided into these parts ：

• 1. Continue to use dozens of lines of code to build the simplest frame of a wheel , That is, the central axis of the wheel （ Core logic ）.
• 2. Prepare for expansion from the central axis ( Add lifecycle hooks ).
• 3. Add spokes （ increase Plugin、loader）
• 4. Add outer ring (es6 To es5、 increase dev-middleware,hot-middleware Such as middleware )

such , A new wheel came into being , Be able to conduct in-depth experiments , It can even be applied to production .

After all , The wheel is an important invention of human progress , meanwhile , Because you keep building wheels over and over again , To keep the wheels changing , Constantly updated , Continuously improve productivity . Rolling transportation from logs , To the use of wooden wheels , Today, car wheels 、 The extensive use of aircraft wheels , Isn't that the best proof . ha-ha , I feel like I've found a good example of making wheels .

below , According to the methodology , Rebuild the wheel step by step . Because usually work under great pressure , So try to make the most of the weekend , Update between breaks , Ladies and gentlemen, please wait patiently . meanwhile , You are also welcome to join the writing of this column , Build the wheel together ~~

Due to factors such as time or impulse at that time , When I was writing , It may not follow the above steps completely . But I think , As more and more articles follow , I will keep sorting , Make it more and more organized .