Similarities and differences between Webpack and gulp, grunt

---restore content starts---

Webpack and Gulp, grunt in fact there is nothing comparable, it can be seen as a module Packer, through the analysis of your project structure, to find JavaScript modules and other browsers can not directly run the expansion of the language (Scss,typescript, etc.), It is converted and packaged into the appropriate format for use by the browser. Gulp/grunt is a tool that optimizes the front-end development process, while Webpack is a modular solution, but the Webpack advantage makes Webpack a tool for Gulp/grunt classes in many scenarios.

There are also big differences in the way they work:

Grunt and gulp work in a configuration file that indicates specific steps for tasks such as compiling, combining, and compressing certain files, which can be done automatically for you after the tool.

The way Webpack works is to treat your project as a whole, With a given master file (for example: Index.js), Webpack will start to find all dependent files for your project from this file, use loaders to process them, and finally package them as one (or more) browser-aware JavaScript files.

At the same time webpack to solve the need to require different files to introduce loader, such as the face of sass files have

1. Sass-loader, convert sass to CSS

2. Css-loader, allowing Webpack to recognize the processing of CSS

3. Style-loader, insert the recognized CSS into the HTML style
   Similar identification es6 have Babel-loader

Originally this is the original intention of webpack, require everything, bundle everything. At first Webpack just out of time everyone is to combine it with gulp together, gulp inside there is a gulp-webpack, is let Webpack specifically to do module dependency things, generate a bundle.js file, and then use G Ulp to do some other assorted minify, uglify things. Later people found that Webpack has a plugins option, can be used to further deal with the loader generated bundle.js, so someone wrote the corresponding plug-in, so minify/uglify, the work of generating hash can also be transferred to Webpack itself, Squeezed out the market share of this part of the gulp. Then we have found Npm/package.json inside of the scripts original good use Ah, call the task of the time directly write a simple command, because Gulp is not a combination of various plug-ins, most of the cases more and more do not need to gulp/grunt Ref. So you see a lot of new projects are package.json inside scripts wrote a bunch, external only need a webpack enough.

Make an inappropriate analogy, webpack is like, originally is to do Chat (module dependency), and then sang out a small program (processing files), we face the simple need to find this than the original app easy to use Ah, As a result, fewer people are developing their native ones.

---restore content ends---

Webpack and Gulp, grunt nothing comparable, it can be seen as a module Packer, through the analysis of your project structure, to find JavaScript modules and other browsers can not directly run the expansion of the language (Scss,typescript, etc.), It is converted and packaged into the appropriate format for use by the browser. Gulp/grunt is a tool that optimizes the front-end development process, while Webpack is a modular solution, but the Webpack advantage makes Webpack a tool for Gulp/grunt classes in many scenarios.

There are also big differences in the way they work:

Grunt and gulp work in a configuration file that indicates specific steps for tasks such as compiling, combining, and compressing certain files, which can be done automatically for you after the tool.

The way Webpack works is to treat your project as a whole, With a given master file (for example: Index.js), Webpack will start to find all dependent files for your project from this file, use loaders to process them, and finally package them as one (or more) browser-aware JavaScript files.

Similarities and differences between Webpack and gulp, grunt