“This is my 33rd day of participating in the First Challenge 2022. For details: First Challenge 2022.”


1. What is Webpack

  • Webpack is a static module packaging tool for javascript
  • All files in Webpack are modules, through loader to convert the file type, through plugin to inject the packaged file into the corresponding phase of the lifecycle hook
  • Finally, output files composed of multiple modules to build modular projects

2. Advantages of Webpack

  • Focus on dealing with modular projects, can do out of the box, one step in place
  • Plugin extension, complete and easy to use yet flexible
  • With the Loaders extension, you can have WebPack parse and pack all types of files
  • The community is large and active, often introducing new features that keep up with The Times, and you can find existing open source extensions for most scenarios

3. The role of webPack loaders and plug-ins

Webpack: Modularize, analyze, compress, and package any file in node

What the loader does: Lets WebPack recognize function-type files in addition to JS files

Function of plug-in: improve the usability of Webpack, so that the functionality of Webpack more comprehensive

4. Functions of the babel-loader plug-in

The babel-Loader plug-in is a JS syntax compiler

You can convert your higher version of JS code into a lower version of JS code

5. Webpack construction process

The running flow of WebPack is a sequential process, from start to finish:

  1. Initialization parameters: Read and merge parameters from the configuration file 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 start compiling
  3. Identify entry: Locate all entry files according to the entry in the configuration
  4. Compiling modules: Starting from the entry file, call all configured Loader to translate the module, find out the module that the module depends on, and then recurse this step until all the entry dependent files have passed this step
  5. Complete module compilation: After using Loader to translate all modules in Step 4, the final content of each module after translation and the dependencies between them are obtained
  6. Output resources: Assemble chunks containing multiple modules one by one according to the dependency between the entry and modules, and 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 complete: After determining the output content, determine the output path and file name based on the configuration, and write the file content to the file system.

In the above process, WebPack will broadcast a specific event at a specific point in time, the plug-in will execute a specific logic after listening for the event of interest, and the plug-in can call the API provided by WebPack to change the running result of WebPack

6. Hot update principle of Webpack

Hot updates to Webpack are also known as Hot Module Replacement, or HMR. This mechanism allows you to replace the old module with the new one without refreshing the browser.

The core of HMR is that the client pulls the updated file from the server, namely chunk diff (the part of chunk that needs to be updated). In fact, WDS(Webpack-dev-server) maintains a Websocket with the browser. When the local resource changes, WDS pushes updates to the browser with a build-time hash for the client to compare to the last resource. The client compares the difference and sends a request to WDS to get the change (file list, hash), which the client can then use to make a JSONP request to WDS to get incremental updates of the chunk.

What happens after you get the incremental update? Which states should be preserved? What needs updating?) This is accomplished by the HotModulePlugin, which provides apis for developers to handle their own scenarios, such as react-hot-loader and Vue-Loader, using these apis to implement HMR.

Webpack-dev-server: a server started with webpack-dev-server that packages only the updated code and provides an address for the browser to access the packaged code

7. Differences between Webpack, Grunt and gulp

The difference between the three

Grunt and Gulp were popular in the early days. Webpack is relatively mainstream now, but gulp is still used for some lightweight tasks, such as packaging CSS files separately.

Grunt and gulp are based on tasks and streams (tasks, streams). Similar to jQuery, find a file (or a class of files) and do a series of chain operations on it to update the data on the stream. The chain operations constitute a single task, and multiple tasks constitute the entire Web build process.

Webpack is portal based. Webpack will automatically recursively parse all the resource files that need to be loaded by the entry, then use different loaders to process different files, and use Plugin to extend WebPack functionality.

In terms of building ideas

Gulp and Grunt require developers to divide the whole front-end construction process into multiple tasks and properly control the call relationship of all tasks. Webpack requires developers to find the entry point and figure out what Loader to use for different resources and how to parse and process them

For knowledge background

Gulp is more like a back end developer, you need to know the whole process very well. Webpack is more like a front end developer

8. Webpack Common Loader

1. File-loader: Outputs files to a folder and references the output file with a relative URL in the code

2, url-loader: similar to file-loader, but can base64 file content into the code in the case of small files

Source-map-loader: Loads additional source map files to facilitate breakpoint debugging

4. Image-loader: loads and compresses image files

5. Babel-loader: convert ES6 to ES5

6. Css-loader: loads the CSS and supports features such as modularization, compression, and file import

7. Style-loader: Inject CSS code into JavaScript and load CSS via DOM manipulation.

8. Eslint-loader: Checks JavaScript code with ESLint

8. Difference between Loader and Plugin

Effect of different

Loader: Webpack treats all files as modules, but WebPack can only parse JS files natively. If you want to package other files, you will use loader. So what loader does is give WebPack the ability to load and parse non-javascript files.

Plugin: Plugin can extend the functionality of WebPack to make it more flexible. 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.

Use different

Loader: is configured in module.rules, which means it exists as a parsing rule for modules. The type is array, each item is an Object, which describes the type of file (test), what to use (loader), and the parameters (options) to use.

Plugin: Configured separately in plugins. Each item is an instance of plugin, and the parameters are passed in through the constructor.