Webpack est un des outils les plus importants dans le monde du développement Web. Dans ce tutoriel, nous allons créer ensemble notre configuration Webpack 4 de A à Z pour un projet React avec Typescript.

Avant de passer à la suite, si vous voulez effectuer un simple test ou bien créer une petite application, n'hésitez pas à utiliser create-react-app avec Typescript. Toute la configuration est déjà faite, vous pouvez vous concentrez sur le code !

Webpack

Webpack est tout simplement un bundler pour applications Javascript. Lorsque Webpack est exécuté, un graph de dépendances va être généré avec tous les modules nécessaires à notre application et regroupé dans un ou plusieurs fichiers Javascript.

Pour comprendre Webpack, il suffit de connaître les 4 principaux concepts :

• Point d'entrée
• Point de sortie
• Loaders
• Plugins

Le point d'entrée est le fichier, ou module, que Webpack va utiliser pour commencer à résoudre les dépendances. La valeur par défaut dans Webpack 4 est `./src/index.js`.

Le point de sortie permet de spécifier à Webpack le répertoire où l'on veut que notre bundle soit exporté ainsi que son nom. La valeur par défaut dans Webpack 4 est `./dist/main.js`.

Un loader permet à Webpack de traiter des fichiers de différents types, autres que Javascript. De base, Webpack ne sait traiter que les fichiers Javascript. Les loaders vont nous permettre de créer des règles pour spécifier à Webpack quel loader il doit utiliser quand il rencontre un certain type de fichier.

Un plugin permet d'étendre les fonctionnalités de Webpack comme par exemple : l'optimisation des bundles, la gestion d'assets, etc. Vous pouvez consulter la liste des plugins fournis par Webpack via ce lien.

Installer Webpack

Tout d'abord, créons et initialisons notre projet :

mkdir react-typescript-webpack-tutorial 
cd react-typescript-webpack-tutorial 
npm init –y   #-y permet de passer les questions

Installons maintenant Webpack et sa CLI :

#yarn 
yarn add webpack webpack-cli --dev 

#npm 
npm i webpack webpack-cli --save-dev 

Webpack 4 possède 2 modes d'exécution : development et production. Le bundle sera minimisé en mode production seulement.

Ajoutons maintenant 2 commandes NPM dans notre fichier `package.json` :

"scripts": { 
  "start": "webpack --mode development", 
  "build": "webpack --mode production" 
}

À ce niveau, si nous créons un fichier `index.js` dans un répertoire `src`, nous pouvons exécuter Webpack sans aucune configuration en utilisant les valeurs par défaut.

Créons un fichier `./src/index.js` avec un code simple :

console.log('hello')

Et maintenant, si nous exécutons la commande `npm start`, nous allons voir apparaître un répertoire `dist` contenant notre bundle `main.js`.

Configurer Webpack

Pour commencer à configurer Webpack, nous avons besoin d'un fichier de configuration appelé `webpack.config.js`.

Après avoir créé ce fichier à la racine de notre projet, ajoutons cette configuration basique :

const path = require("path")

module.exports = { 
  entry: "./src/index.js",   // point d'entrée 
  output: { 
    path: path.join(__dirname, "/dist"),  // repértoire du bundle 
    filename: "index_bundle.js"           // nom du bundle
  } 
}

• Nous avons spécifié `./src/index.js' en point d'entrée.
• Nous avons également spécifié que nous voulons que notre bundle soit généré dans le dossier `/dist` avec comme nom `index_bundle.js`

Vous pouvez bien sûr changer ces valeurs comme le souhaitez.

Ajouter Typescript

Pour ajouter Typescript, installons tout d'abord les dépendances :

#yarn
yarn add typescript awesome-typescript-loader --dev

#npm
npm i --save-dev typescript awesome-typescript-loader

`awesome-typescript-loader` va nous aider à compiler notre code Typescript et générer les sourcemaps.

Ajouter un fichier de configuration Typescript

Nous avons maintenant besoin de créér un fichier de configuration pour Typescript appelé `tsconfig.json` à la racine de notre projet. Ce fichier va contenir toute notre configuration de compilation : 

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  },
  "include": [
    "./src/**/*"
  ]
}

Vous pouvez en apprendre davantage au sujet du fichier `tsconfig.json` dans la documentation officielle.

Configurer Webpack pour Typescript

Nous avons maintenant besoin de dire à Webpack d'utiliser notre `awesome-typescript-loader` pour chaque fichier Typescript. Mettons à jour notre fichier de configuration `webpack.config.js` en suivant les commentaires : 

const path = require("path")

module.exports = {
  // Change le point d'entrée en index.tsx
  entry: "./src/index.tsx",
  // Active le sourcemap pour le debugging
  devtool: "source-map",
  resolve: {
    // Ajoute '.ts' et'.tsx' aux extensions traitées
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index_bundle.js"
  },
  module: {
    rules: [
      // Tous les fichiers en `.ts` ou `.tsx` seront traités en utilisant `awesome-typescript-loader`
      { 
        test: /\.tsx?$/, 
        loader: "awesome-typescript-loader" 
      }
    ]
  }
}

Tester la configuration

Afin de tester notre configuration, nous devons changer l'extension de notre fichier `index.js` en `index.tsx` et y ajouter du code Typescript :

type Message = {
  body: string,
  from: string
}

let message: Message = {
  from: 'Max',
  body: 'Hi!'
}

console.log(`New message from ${message.from}: ${message.body}`)

Si nous exécutons `npm start`, nous pouvons constater que notre code a bien été compilé par Webpack dans le repértoire `dist` avec son fichier sourcemap !

Ajouter React

Ajoutons maintenant React et ReactDOM ainsi que leur typing en dépendances :

# yarn
yarn add react react-dom @types/react @types/react-dom

# npm
npm i react react-dom @types/react @types/react-dom

Puis créons un simple composant React `Message.tsx` dans un repértoire `src/components` :

import * as React from 'react'

class Message extends React.Component<MessageProps> {
  render() {
    return (
      <div>
        {`You got a new message from ${this.props.from}: ${this.props.body}`}
      </div>
    )
  }
}

interface MessageProps {
  body: string
  from: string
}

export default Message

Finalement, modifions notre fichier `index.tsx` pour importer React et ReacDOM et rendre notre nouveau composant Message :

import * as React from "react";
import * as ReactDOM from "react-dom";

import Message from "./components/Message";

ReactDOM.render(
    <Message from='Max' body='Hi !' />,
    document.getElementById("root")
);

Si nous exécutons la commande `npm start`, Webpack doit maintenant pouvoir comprendre et transformer notre code React / Typescript !

Ajouter de l'HTML

Je n'ai volontairement pas créé de fichier HTML pour l'instant car nous allons utiliser un plugin Webpack appelé `html-webpack-plugin` pour cela. Le plugin va permettre à Webpack de générer un fichier HTML en se basant sur un template que nous allons lui spécifier en incluant automatiquement nos bundles :

# yarn 
yarn add html-webpack-plugin --dev 

# npm 
npm i --save-dev html-webpack-plugin 

Après avoir installé le plugin, nous devons l'ajouter dans le fichier de configuration de Webpack en spécifiant un template HTML :

const path = require("path") 

// Require the new plugin
const HtmlWebpackPlugin = require("html-webpack-plugin") 

module.exports = { 
  entry: "./src/index.tsx",
  devtool: "source-map",
  resolve: { 
    extensions: [".ts", ".tsx", ".js", ".json"] 
  }, 
  output: { 
    path: path.join(__dirname, "/dist"), 
    filename: "index_bundle.js" 
  }, 
  module: { 
    rules: [ 
      {  
        test: /\.tsx?$/,  
        loader: "awesome-typescript-loader"  
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({      // Instancie le plugin
      template: "./src/index.html"  // Spécifie notre template
    })
  ]
}

Créons maintenant un simple fichier `index.html` dans le répertoir `src` :

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>TypeScript + React</title> 
  </head> 
  <body> 
    <div id="root"> 

    </div>
  </body>
</html>

Si nous exécutons `npm start`, nous devrions maintenant avoir un fichier `index.html` avec notre bundle inclus dans un tag script.

Configurer un environnement de développement

Pour finir, nous allons configurer un serveur de développement qui va nous fournir un rechargement à chaud (hot reloading) en utilisant `webpack-dev-server` :

# yarn 
yarn add webpack-dev-server --dev 

# npm 
npm i webpack-dev-server --save-dev 

Après avoir installé le module, nous avons besoin de modifier notre script NPM dans le fichier `package.json` :

"scripts": { 
  "start": "webpack-dev-server --mode development --open --hot", 
  "build": "webpack --mode production" 
}

Nous avons spécifié à webpack-dev-server de se lancer en mode dévelopement tout en surveillant les modifications de fichiers.

• --hot permet d'activer le module de rechargement de la page à chaud.
• --open va automatiquement lancer le navigateur par défaut à la bonne addresse.

Pour plus d'informations concernant webpack-dev-server, consultez la documentation officielle.

Conclusion

Nous pouvons maintenant utiliser la commande `npm start` pour lancer notre environnement de dévelopement ainsi que `npm build` pour générer notre bundle de production.

Ceci n'est qu'une configuration basique de Webpack pour un projet utilisant React avec Typescript. Je vous conseille fortement d'optimiser cette configuration en ajoutant des loaders, plugins, etc.