The basic difference between Gulp and Webpack:
Gulp can compress and package js, html, css, and img. It is an automated construction tool. It can compress multiple js files or css into one file, and can be compressed into one line to reduce the file size, speed up the request speed and Reduce the number of requests; and gulp has task definitions to process transactions to build the overall process. It is an automated construction tool based on flow.
Webpack is a front-end construction tool that implements modular development and file processing. His idea is that "everything is a module", it can load each module on demand without causing useless or redundant code to be loaded. So he also has a name called front-end modular packaging tool.
As far as I am concerned, I will choose to mix the two in practice. Although both can be compressed and merged to reduce the code size, the gulp code in gulp.config.js is simpler and easier to understand. Whoever needs to compress and merge can use which method, while webpack style merging requires downloading plug-ins in the node environment. use. On the other hand, gulp is a stream-based packaging tool. Who needs it, who is quoted, and its compression is simple and clear, and it is easy to maintain in the later stage. Webpack can divide specific modules, and load which module is required to achieve on-demand Load and eliminate redundant code to reduce code size.
To sum up, gulp is a stream-based automated build tool , but does not include modular functions. If you want to use it, you need to introduce external files, such as require.js, etc.; while webpack is an automated module packaging tool that has itself Modular, and also has the function of compression and consolidation. The two have different focuses, and I think their combined use will improve code quality and code optimization.