What is the difference between react and webpack

Difference: 1. React is a JavaScript framework, while webpack is a static module packager for JavaScript applications; 2. React is mainly used to build user interfaces, while webpack can be reloaded and compiled to compile all All static resources are merged, thereby reducing IO requests.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

What is react

React is a JavaScript framework for building user interfaces.

Framework: Code that can be reused. The more people use it, the more famous it becomes, and the more people use it, the more valuable it is. (laughing)

Angular is as famous as React.

React is a JS library used to render UI, positioned as a UI implementation

React Web App solution, and the derived React Native is a cross-screen App solution

Features:

• Declarative design: declarative paradigm

• Efficient: use VDOM to reduce DOM interaction

• Flexible: Works well with known libraries or frameworks

• JSX: An independent language that attempts to solve many of the shortcomings of JS, ES6 contains almost All JSX features

• Components: Code reuse

• One-way response data flow: simpler and faster than two-way binding.

Why use React?

Traditional methods frequently operate DOM, but the performance cannot meet the requirements; React uses VDOM, which has high performance

Traditional JS code maintenance costs are high, React is based on component development

Needs to support mobile development

Disadvantages of React:

• For traditional front-ends that have been using JS and jQuery, React is very unfriendly

• React emphasizes component and state management, and its world view is oriented to programming languages

• Vue.js emphasizes the automatic synchronization of views, and its world view is oriented to UI scripts

• The learning cost of React is higher than that of Vue.js.

• React does not have a family bucket, it only does UI

What is webpack

Essentially, webpack is a static module bundler (module bundler) for modern JavaScript applications. When webpack processes an application, it recursively builds a dependency graph that contains every module the application needs, and then packages all these modules into one or more bundles.

Webpack is like a production line. It needs to go through a series of processing processes before the source files can be converted into output results. Each processing process on this production line has a single responsibility, and there are dependencies between multiple processes. Only after the current processing is completed can it be handed over to the next process for processing. A plug-in is like a function inserted into the production line, which processes the resources on the production line at a specific time.

Webpack uses Tapable to organize this complex production line. Webpack will broadcast events during the running process. The plug-in only needs to listen to the events it cares about and can join the production line to change the operation of the production line. The event flow mechanism of webpack ensures the orderliness of plug-ins, making the entire system very scalable.

webpack build process

The running process of Webpack is a serial process. The following process will be executed from start to end:

• Initialization parameters: Read and merge parameters from the configuration file and Shell statement to obtain the final parameters.

• Start compilation: 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 compilation.

• Determine the entry: Find all entry files according to the entry in the configuration.

• Compile the module: Starting from the entry file, call all configured Loaders to translate the module, then find out the modules that the module depends on, and then recurse this step until all the entry-dependent files are Passed this step.

• Complete module compilation: After using Loader to translate all modules in step 4, the final translated content of each module and the dependencies between them are obtained.

• Output resources: According to the dependency relationship between the entry and the module, assemble 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 opportunity to modify the output content.

• Output completion: After determining the output content, determine the output path and file name according to the configuration, and write the file content to the file system.

In the above process, Webpack will broadcast specific events at specific points in time. The plug-in will execute specific logic after listening to the events of interest, and the plug-in can call Webpack Provides an API to change the results of Webpack's execution.

The difference between react and webpack

React is a JavaScript framework, a JS library used to render UI and build user interfaces.

Webpack is a bundler that can package multiple js files into one file (in fact, it can not only package js files, but also other types of files, such as css files, json files, etc.).

The role of webpack

• Reload and compile. What it actually does is compile syntax that the browser doesn't recognize into syntax that the browser recognizes. For example, less is compiled into css, ES6 syntax is converted into ES5, etc.

• Reduce io requests. Usually after we make a request, we will return an html to the browser. At this time, if we open the console, we will find the static resources referenced through script, link and other tags in the HTML page, and the browser will make another request to obtain these resources. However, webpack's packaging merges all static resources and reduces IO requests.

[Related recommendations: Redis video tutorial]

The above is the detailed content of What is the difference between react and webpack. For more information, please follow other related articles on the PHP Chinese website!