Reference: webpack principle
front-end interview-webpack articles
1. What is the general configuration when using webpack?
webpack is a static module processor. When it processes an application, it recursively builds a dependency graph , which contains each module required by the application, and then packs all these modules into one or more packages
2. The packaging process using webpack
- Initialization : start building, read and merge parameters, load plugin, instantiate complier
- Compile : Starting from Entry, call the corresponding loader serially for each Module to translate the content of the file, and then find the Module that the Module depends on, and recursively compile it.
- Output : Combine the compiled Module into a Chunk, convert the Chunk into a file, and output to the file system
3. Commonly used loader
- file-loader: output the file to a folder, and reference the output file by relative URL in the code
- source-map-loader: Load additional Source Map files to facilitate breakpoint debugging
- image-loader: load and compress image files
- babel-loader: Convert ES6 to ES5
- css-loader: Load CSS, support modularization, compression, file import and other features
- eslint-loader: Check JavaScript code through ESLint
4. Commonly used plugins
- define-plugin: define environment variables
- commons-chunk-plugin: extract common code
- uglifyjs-webpack-plugin: Compress ES6 code through UglifyES
5. The difference between loader and plugin
- Both are to extend the functionality of webpack. Loader only focuses on the field of transform, completes compression, packaging, and language translation; while plugin is not only limited to packaging, resource loading, but also packaging optimization and compression, redefining environment variables, etc.
- Loader runs before the packaged file (loader is the preprocessed file when the module is loaded); plugins work throughout the compilation cycle
- The responsibility of a loader is single, and only one conversion needs to be completed. A loader is actually a Node.js module. When multiple loaders need to be called to convert a file, each loader will execute in a chained sequence
- Many events will be broadcast during the life cycle of webpack running. The plugin will listen to these events and change the output results through the API provided by webpack at the right time.
6、webpack ，gulp和grunt
grunt and gulp are based on tasks and streams (Task, Stream), find a file (or a type), do a series of chain operations on it, update the data on the stream, the entire chain operation constitutes a task, multiple The tasks constitute the entire web construction process.
From the perspective of construction ideas, gulp and grunt require developers to split the entire front-end construction process into multiple tasks and reasonably control the calling relationships of all tasks; webpack requires developers to find the entrance and need to know what to use for different resources What kind of analysis and processing does Loader do