what is react webpack

react is a JAVASCRIPT library used to build user interfaces; webpack is a front-end resource loading/packaging tool. webpack will perform static analysis based on the dependencies of the modules, and then generate corresponding modules according to the specified rules. static resources.

The operating environment of this tutorial: windows7 system, webpack3.0&&react16.4.0 version, Dell G3 computer.

Recommended: react video tutorial

React is a JAVASCRIPT library for building user interfaces.

React is mainly used to build UI. Many people think that React is the V (view) in MVC.

React originated as an internal project at Facebook to build the Instagram website and was open sourced in May 2013.

React has high performance and very simple code logic. More and more people have begun to pay attention to and use it.

Webpack is a front-end resource loading/packaging tool. It will perform static analysis based on module dependencies, and then generate corresponding static resources for these modules according to specified rules.

Webpack is an open source front-end packaging tool. Webpack provides a modular development approach that front-end development lacks, treating various static resources as modules and generating optimized code from it. Webpack can set various functions from the terminal or by changing webpack.config.js. Node.js must be installed before using Webpack.

The main goal of webpack is to package JavaScript files together for use in the browser, but it is also capable of transforming, bundling, or packaging any Resource (resource or asset).

Webpack Configure React development environment

Install Webpack: npm install -g webpack

Webpack uses a file called webpack. config.js configuration file, to compile JSX, first install the corresponding loader: npm install babel-loader --save-dev

Assume we have an entry file entry.js in the current project directory, and the React component is placed In a components/ directory, the component is referenced by entry.js. To use entry.js, we specify the output of this file to dist/bundle.js. The Webpack configuration is as follows:

var path = require('path');module.exports = {
    entry: './entry.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },    module: {
        loaders: [
            { test: /\.js|jsx$/, loaders: ['babel'] }
        ]
    }
}

resolve specifies that it can be imported File extension. For example, files like Hello.jsx can be directly referenced using import Hello from 'Hello'.

loaders Specify babel-loader to compile files with a .js or .jsx extension, so you can freely use JSX and ES6 in these two types of files.

Monitoring compilation: webpack -d --watch

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