Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "what are the differences between react and webpack", detailed content, clear steps, and proper handling of details. I hope this article "what is the difference between react and webpack" can help you solve your doubts.

Differences: 1, React is a JavaScript framework, and webpack is a static module baler for JavaScript applications; 2, React is mainly used to build the user interface, while webpack can be reloaded and compiled, but all static resources are merged, reducing io requests.

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

What is react?

React is the JavaScript framework for building user interfaces.

Framework: code that can be reused. If you use more people, you will become famous, and the more people you have, the more valuable you will be. (laughs)

Angular with the same name as React.

React is a JS library for rendering UI, located in and implementing UI

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

Features:

Declarative design: declarative paradigm

Efficient: use VDOM to reduce DOM interaction

Flexibility: works well with known libraries or frameworks

JSX: an independent language that tries to solve many of the shortcomings of JS. ES6 contains almost all the features of JSX.

Components: code reuse

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

Why use React?

Traditional methods operate DOM frequently, so their performance can not meet the requirements, while React uses VDOM with high performance.

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

Need to support mobile development

Disadvantages of React:

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

React emphasizes component and state management, and its world view is language-oriented.

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

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

React doesn't have a family bucket, just UI.

What is webpack?

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

Webpack is like a production line, it takes a series of processes to convert the source file into the output. The responsibility of each process on this production line is single, and there is a dependency between multiple processes, which can be handed over to the next process only after the current process is completed. A plug-in is like a function that is inserted into the production line, dealing with the resources on the production line at a specific time.

Webpack organizes this complex production line through Tapable. Webpack broadcasts events during operation, and the plug-in only needs to listen to the events it cares about to join the production line to change the operation of the production line. The event flow mechanism of webpack ensures the order of the plug-in and makes the whole system scalable.

Webpack construction process

The running process of Webpack is a serial process, and the following processes are executed from start to finish:

Initialization parameters: read and merge parameters from configuration files and Shell statements to get 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 object's run method to start compilation.

Determine the entry: find all the entry files according to the entry in the configuration.

Compilation module: starting from the entry file, call all the configured Loader to translate the module, then find out the module that the module depends on, and then recurse this step until all the files that the entry depends on have been processed by this step.

Complete module compilation: after translating all modules using Loader in step 4, you get the final content of each module after translation and the dependencies between them.

Output resources: according to the dependency between portals and modules, assemble Chunk containing multiple modules, and then convert each Chunk into a separate file to add to the output list. This step is the last chance to modify the output.

Output completed: after determining the output content, determine the path and file name of the output according to the configuration, and write the file content to the file system.

In the above process, Webpack broadcasts specific events at a specific point in time, the plug-in executes specific logic after listening for events of interest, and the plug-in can call API provided by Webpack to change the running result of Webpack.

The difference between react and webpack

React is a JavaScript framework, a JS library for rendering UI, and for building a user interface.

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

The role of webpack

Reload and compile. In fact, the syntax that the browser does not understand is compiled into the syntax that the browser knows. For example, less is compiled into css,ES6 syntax and converted to ES5 and so on.

Reduce io requests. Usually we return a html to the browser after the request. At this point, if we open the console, we will find static resources referenced by tags such as script,link on the html page, and the browser will make another request to get these resources. But the packaging of webpack merges all static resources and reduces io requests.

After reading this, the article "what is the difference between react and webpack" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.