Formation Comprendre Webpack : Plugin HTML

Dans le chapitre précédent nous avons vu comment il est possible d'utiliser le plugin HTML pour insérer automatiquement l'url du fichier généré dans la page HTML. Aujourd'hui je vous propose de pousser le concept un peu plus loin avec l'utilisation de l'EJS.

Installation

Nous allons commencer par installer les dépendances nécessaires :

npm i -D html-webpack-plugin ejs-loader

On va ensuite ajouter le plugin html dans notre configuration webpack :

const HtmlWebpackPlugin = require('html-webpack-plugin')

let config = {
  entry: './assets/js/app.js',
  watch: true,
  output: {
    path: path.resolve('./dist'),
    filename: '[name].[chunkhash:8].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: ['babel-loader']
      },
      {
        test: /\.ejs$/,
        use: ['ejs-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: 'index.ejs'})
  ]
}

L'utilisation de l'EJS permet de décomposer notre page mais aussi de pouvoir utiliser du JavaScript pour générer des éléments HTML.

<%= require('./partials/header.ejs')({title: 'Homepage'}) %>

    <div class="card-deck">
        <% for(let i = 0; i < 3; i++) { %>
        <div class="card">
          <img class="card-img-top" src="..." alt="Card image cap">
          <div class="card-body">
            <h4 class="card-title"><%= faker.lorem.sentence() %></h4>
            <p class="card-text"><%= faker.lorem.words(25) %></p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <% } %>
      </div>

<%= require('./partials/footer.ejs')() %>

Il est même possible de charger des librairies NodeJS pour aider à générer du faux contenu comme faker par exemple.