Introduction

Le premier problème que vous pourriez rencontrer est de configurer webpack et babel pour utiliser une version moderne de Javascript avec React, dans ce tutorial je vais vous présenter une configuration simple et efficace.

Ce tutorial suppose que vous savez déjà ce qu’est webpack, que vous avez déjà galéré avec sa configuration et que vous aimeriez bien apprendre à le faire vous même from scratch.

1 – Creation d’un projet

Notre projet sera créé comme un projet npm normal, dans un répertoire de votre choix lancez la commande suivante :

npm init

Nommez votre projet, puis laissez tout les paramètres par défaut.

2 – Structure de base

— src/ <—- Sources du projet
|——index.jsx
|——index.html

— public/ <—— Ressources ( images, css … )
— dist/ <—— Contiendra le code compilé et prêt à être déployé.

3 – Installation des dépendances

installer les dépendances webpack :

npm i --save-dev webpack-merge webpack html-webpack-plugin copy-webpack-plugin webpack-dev-server

installer les dépendances babel:

npm i --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-react-hmre babel-preset-stage-0 babel-register

4 – Configuration de babel

Il faut maintenant configurer babel pour utiliser la bonne version de Javascript dans notre projet, notez qu’on ajoute aussi le plugin react qui se charge de transpiler la syntaxe JSX en du code Javascript.

dans package.json ajouter cette section

"babel": {
"presets": [
"es2015",
"react",
"stage-0"
]
},

5 – Configurer webpack

Configurer les scripts pour utiliser webpack dans package.json :

"scripts": {
"start": "webpack-dev-server --progress --inline --hot",
"build": "webpack -p"
},

Script de configuration de webpack

Puis configurez votre web pas comme présenté ci-dessous, avec cette configuration on va :

  1. Définir le fichier src/index.jsx comme point d’entrée de l’application
  2. Compiler les fichiers Javascripts dans src/ et ayant une des extensions (js ou jsx)
  3. Utiliser le plugin ‘HtmlWebpackPlugin‘ pour ajouter automatiquement la balise