Original link: https://blog.csdn.net/qq272936532/article/details/90521752
Author: developer- April
1. Understand what is webpack
Internet search is a direct explanation: Modular baler or module packaging tools.
First of all, that it is a tool to help us better deal with things.
Secondly, the "package", how to understand? Suppose we need to send express. We will have many items into a cardboard boxes, and then sealing. This is packaged. Corresponds to the front-end development, it is a lot of css files, js files, images and other "goods", all written in a js file, rather than a static html page to introduce multiple resources via script, link tags.
Modular, in fact, different css, js is a different module. For example, a index.html, there is usually a index.css,
a index.js, there are other css, js. These different files can be seen as different modules. Different modules have their own role.
To summarize: With this tool, we will help different resources and files, packaged, which is incorporated in a file inside. But not only
that, it also attached some more useful features.
Additional features:
1.CSS pretreatment. Will compile Less, Sass into CSS
2.ES6 grammar turned into ES5 ... (wait learning supplement)
2. action
Reload compiled. The syntax is actually the browser does not know grammar compiled into the browser know. For example, less
compiled into css, ES6 turn into ES5 grammar and so on.
Io reduction request. We usually after the request, it will return a html to the browser. At this point, if we open the console, you will find in the html page static resource script, link, etc. label references, the browser sends a request again to obtain these resources. But packaged webpack will merge all static resources well, reducing io request.