Preface: These two have learned the basic use of gulp and webpack every day, in fact, for these tools, understand the basic usage, familiar with some common configuration and methods is enough for daily use. More complex to wait until the need to check the relevant documents.
Gulp and Webpack have similar features, such as compressing and merging files, but should be considered as two types of tools.
The main function of gulp as an automated building tool is to automatically compress, CSS transform, merge resource files, and reduce HTTP requests, which are sufficient for a typical front-end project. And it's more convenient to use.
It is convenient to introduce components and create tasks in Gulpfile.js.
While Webpack is a chatty front-end project building tool, the basic front-end project construction process of the problems are related to a little, whether it is modular development, load on demand, or transform, compile merged resource files. Third-party classes can even be
Library is useful as a module. The learning process also deepens the understanding of modular development. A variety of plug-ins for improving development efficiency, integration of files is also very practical. However, the configuration is more cumbersome.
In short, if it is just general resource optimization, the use of Gulp is sufficient, and webpack is a tool for building modular development projects. There are not too many conflicts and can even be used together.
Learning Webpack in order to learn Vue next, perhaps only in the process of learning vue to better experience the role of Webpack.
Gulp, Webpack Study notes