preface

There is no doubt that Webpack has a unique importance in the front end and is a skill point you must be familiar with. Because when you send in your resume and browse through some of the front-end jobs in big companies, Webpack is no doubt written at least if you are familiar with Webpack. During my study of Webpack, I was often confused by its configuration and environment, and now I start to learn again, I hope I can master it. In the spirit of sharing learning attitude, record my learning process, hoping to provide some help to some new students of Webpack.

Webpack uses reasons and definitions

I believe that many students who just start to learn Webpack must frantically search for “what is Webpack” in major forums or Baidu before learning, because I did so. But some of the great articles mentioned what is Webpack is always a brush over, after reading the cloud is in a fog, confused. Now I’ll explain Webpack in my own words. Before we do that, let’s explain why we should use Webpack:

Why use Webpack

We all know that a big company’s website is always cool, beautiful and full of features. Behind that front end engineers put a lot of effort into optimization and stuff. Large websites and large projects have complex JS code and many dependencies behind them.In order to simplify the complexity of development, the program is often cut into different modules. As shown, cut large projects into many different modules. So, what’s with the arrow in there, I think it can be interpreted asrequire. Because the two files are linked to each otherrequireOf the connection. Well, for example,htmlFile using thelinkThe introduction of styles in.webpackIntegrated modules in the project package more streamlined. So we needwebpack.

  • Webpack analyzes the structure of large projects
  • Find JS modules and modules that browsers can’t run directly (CJS,Sass, HBS, etc.)
  • Convert and package files that cannot be handled directly by the browser into an appropriate format for direct browser processing.
  • This will make it easier for front-end engineers to develop systems and enable browsers to run more efficiently and smoothly.

What is a Webpack

That was mentioned aboveWebpackI’m giving you an exampleNot very rigorousYou might get the idea.

If you go to a restaurant and order food, you feel more comfortable taking it home to your dorm room. You order a lot of dishes, spicy, sour, sweet, fruit, small cakes in different flavors. Consider that some of your roommates like spicy food, some like sweet food, and some like fruit. If all the dishes are mixed together and your roommates may not like it, you decide not to mix them together, but to mix them according to taste. Mix up the spicy dishes, mix up the sweet dishes, mix up the fruit. So your roommate can accept it.

Combined with webpack’s workflow above, it can be said that: WebPack analyzes the structure of large projects, that is, what kinds of dishes they are; Find the modules that won’t run directly in the browser. That is, analyze which tastes your roommate won’t accept. Convert and package files that the browser can’t handle directly into a format that the browser can handle. Combined with the above figure, you should have a clear idea of the running flow of Webpack.

Webpack workflow

It’s not intuitive to use words, so I’ll try to use graphics. First, the dependency is the arrow in the first figure of this article.

To be continued…