1. Installez Node.js et npm : Webpack est basé sur Node.js et distribué via npm. Vous devez donc installer Node.js et npm avant de pouvoir utiliser Webpack.
1. Installez Webpack : Ouvrez votre terminal et installez Webpack globalement sur votre ordinateur en utilisant la commande suivante :
npm install -g webpack1. Créez un nouveau projet React : Ouvrez votre terminal, allez dans le répertoire où vous voulez créer votre nouveau projet et utilisez la commande suivante pour créer un nouveau projet React :
npx create-react-app mon-app Où “mon-app” est le nom de votre nouvelle application.1. Installez le chargeur de babel : Babel est un transpilateur JavaScript qui convertit le code ES6 en code ES5. Vous devez installer le chargeur de babel pour utiliser jsx avec React. Ouvrez votre terminal et tapez la commande suivante pour installer le chargeur de babel :
npm install babel-loader babel-preset-env babel-preset-react —save-dev1. Créez un fichier de configuration Webpack : Créez un nouveau fichier nommé “webpack.config.js” à la racine de votre projet.
1. Configurez Webpack : Ouvrez le fichier “webpack.config.js” et ajoutez la configuration suivante :
```
var path = require(‘path’);
var webpack = require(‘webpack’);
module.exports = {
entry: ‘./src/index.js’,
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [‘babel-loader’]
}
]
},
resolve: {
extensions: [‘*’, ‘.js’, ‘.jsx’]
},
output: {
path: path.resolve(__dirname, ‘dist’),
publicPath: ‘/’,
filename: ‘bundle.js‘
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: ‘./dist’,
hot: true
}
};
```
1. Ajoutez des scripts à votre fichier package.json : Ouvrez le fichier package.json et ajoutez les scripts suivants :
```
“scripts”: {
“start”: “webpack-dev-server —mode development”,
“build”: “webpack —mode production“
}
```
1. Démarrez votre projet : Ouvrez votre terminal et tapez la commande suivante pour démarrer votre projet :
npm startMaintenant, votre projet React est configuré pour utiliser webpack. Chaque fois que vous modifiez votre code, webpack recompilera automatiquement votre application et actualisera votre navigateur.
