qu'est-ce que le webpack de réaction

react est une bibliothèque JAVASCRIPT utilisée pour créer des interfaces utilisateur ; et webpack est un outil frontal de chargement/packaging de ressources qui effectuera une analyse statique basée sur les dépendances des modules, puis générera les modules correspondants en fonction. les règles spécifiées.

L'environnement d'exploitation de ce tutoriel : système Windows7, version webpack3.0&&react16.4.0, ordinateur Dell G3.

Recommandé : Tutoriel vidéo React

React est une bibliothèque JAVASCRIPT permettant de créer des interfaces utilisateur.

React est principalement utilisé pour créer une interface utilisateur. Beaucoup de gens pensent que React est le V (vue) de MVC.

React est né d'un projet interne à Facebook, utilisé pour créer le site Web d'Instagram et a été open source en mai 2013.

React a des performances élevées et une logique de code très simple. De plus en plus de gens ont commencé à y prêter attention et à l'utiliser.

Webpack est un outil frontal de chargement/packaging de ressources. Il effectuera une analyse statique basée sur les dépendances des modules, puis générera les ressources statiques correspondantes pour ces modules selon les règles spécifiées.

Webpack est un outil de packaging front-end open source. Webpack fournit une approche de développement modulaire qui manque au développement front-end, traitant diverses ressources statiques comme des modules et générant du code optimisé à partir de celles-ci. Webpack peut définir diverses fonctions depuis le terminal ou en modifiant webpack.config.js. Node.js doit être installé avant d'utiliser Webpack.

L'objectif principal de webpack est de regrouper des fichiers JavaScript pour les utiliser dans le navigateur, mais il est également capable de transformer, regrouper ou empaqueter n'importe quelle ressource (ressource ou actif).

Webpack Configurer l'environnement de développement React

Installer Webpack : npm install -g webpack

Webpack utilise un outil appelé webpack. Fichier de configuration de config.js. Pour compiler JSX, installez d'abord le chargeur correspondant : npm install babel-loader --save-dev

Supposons que nous ayons un fichier d'entrée Entry.js dans le répertoire du projet actuel, et le composant React est placé Dans un répertoire composants/, le composant est référencé par Entry.js. Pour utiliser Entry.js, nous spécifions la sortie de ce fichier à dist/bundle.js. La configuration du Webpack est la suivante :

.

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 précise qu'il peut être importé avec le suffixe du fichier. Par exemple, des fichiers comme Hello.jsx peuvent être directement référencés en utilisant import Hello from 'Hello'.

loaders spécifie babel-loader pour compiler les fichiers avec une extension .js ou .jsx, afin que vous puissiez utiliser librement JSX et ES6 dans ces deux types de fichiers.

Compilation de moniteurs : webpack -d --watch

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!