1. Differences between gulp and grunt and Webpack

  1. Gulp and Grunt require developers to split the entire front-end build process into multiple tasks and control the calling relationship of all tasks

  2. Webpack: WebPack is more about module packaging, of course we can think of all the resources in development (images, JS files, CSS files, etc.) as modules.

2. Common Loader and Plugin

Loader:

  • Babel-loader: converts ES6 to ES5
  • Css-loader: loads the CSS and supports features such as modularization, compression, and file import
  • Style-loader: Injects CSS code into JavaScript and loads the CSS using DOM operations.
  • Eslint-loader: Checks JavaScript code with ESLint

The Plugin:

  • Html-webpack-plugin: Dynamically adds hashing after each compile to external resources introduced into HTML files, such as script and link, to prevent references to cached external files. Generate create HTML entry files. For example, a single page can generate one HTML entry, and N HTml-Webpack-plugins can generate N page entry

3. Load code on demand

babel-plugin-component

4. Build the process

  1. Initialization parameters: read and merge parameters from configuration files and Shell statements to get the final parameters;
  2. Start compiling: Initialize the Compiler object with the parameters obtained in the previous step, load all configured plug-ins, and execute the run method of the object to start compiling.
  3. Determine entry: Find all entry files according to the entry in the configuration;
  4. Module compilation: Start from the entry file, call all configured loaders to translate the module, then find out the module that the module depends on, and then recurse this step until all the entry dependent files have been processed by this step;
  5. Completion of module compilation: After all modules are translated by Loader in step 4, the final content of each module after translation and the dependency between them are obtained;
  6. Output resources: According to the dependencies between the entry and the module, assemble them into chunks containing multiple modules, and then convert each Chunk into a separate file and add it to the output list. This step is the last chance to modify the output content.
  7. Output completion: After the output content is determined, the output path and file name are determined according to the configuration, and the file content is written to the file system.