What Webpack is for

  1. Package one or more JS files into corresponding files
  2. Package one or more CSS files into corresponding files
  3. The compression code
  4. Convert a higher version of JS to a lower version of JS
  5. The code analysis

Webpack dev – the role of the server

  1. Changes in file content automatically translate the code, and automatically refresh the page
  2. Provide server for easy development preview

HTTP cache

The first cache is stored in memory, and the second cache is not needed, which effectively improves the page loading efficiency

Difference between Loader and Pugin

1. Packaging principle of Webpack

  1. Identification entry file
  2. By identifying module dependencies layer by layer (Commonjs, AMD, or ES6 imports are all analyzed by WebPack to get code dependencies)
  3. What Webpack does is analyze code, transform code, compile code, and output code
  4. The result is packaged code

Ii. What is loader

Loader is a file loader that loads resource files, performs some processing, such as compilation and compression, on these files, and finally packages them into a specified file

  1. Multiple Loaders can be used to process a file. The execution sequence of loaders is reversed from that in the configuration. That is, the last loader is executed first and the first loader is executed last
  2. The first loader to execute receives the source file content as a parameter, the other loaders receive the return value of the previous loader as a parameter, and the last loader to execute returns the JavaScript source code for this module

What is plugin

A number of events are broadcast during the life cycle of a WebPack run, and the Plugin can listen for these events and change the output when appropriate through the API provided by WebPack.

4. Differences between Loader and Plugin

For loader, it is A converter to compile file A into file B. Here, the operation is the file, for example, a.css to A.CSS, pure file conversion process

Plugin is an extender, which enrichis Webpack itself. It is aimed at the whole process of Webpack packaging after loader ends. It does not operate files directly, but works based on the event mechanism, and will listen to some nodes in the process of Webpack packaging to perform a wide range of tasks