Introduction
In my blog, there are actually few tool-related tutorial articles. One reason is that these tool-related articles are all similar, and the other reason is that I am lazy and many step-by-step tutorials require detailed descriptions and rich screenshots, which is not suitable for me.
But this time I decided to write this topic because I think webpack is a tool that beginners are not easy to understand, and even if they understand it, they may not really understand it. In other words, it is a tool that is often misunderstood.
This is not a problem with webpack itself, but many beginners now start with React or Vue directly in front-end development, and they all use the CLI tools provided by them. When they need to customize some settings, they will notice: “Oh, there is a thing called webpack.”
CLI tools bring convenience, and the advantage is that beginners can quickly get started without worrying about those cumbersome settings; the disadvantage is that if beginners are not aware of the tools behind them, when the tools are broken, cannot be used, or need to be modified somewhere, it will be the beginning of a nightmare.
In order to reduce this situation, I decided to write this article, hoping to introduce everyone to the concept of webpack and modularity from the source. You must first know what a module is to understand what webpack is.
At the beginning, I want to let everyone think about their familiarity with modularity and webpack through a few questions:
- Why do many projects (such as React) need to be built before deployment? What is this step doing?
- Do you know the difference between
require/module.exportsandimport/export? - Do you know that these two syntaxes of import and export cannot be used casually on the browser?
- Do you know why to use webpack?
- Do you know why webpack needs a loader?
These questions should inspire you a little bit while reading this article, and I will answer them for you at the end.