gistfile1.txt

Fichier WEBPACK
 
// On importe un plugin Webpack qui permet de générer automatiquement 
// un fichier HTML incluant nos fichiers JavaScript
const HtmlWebpackPlugin = require('html-webpack-plugin');
// On exporte la configuration de Webpack
module.exports = {
  // On définit le mode 'development' qui permet d'avoir un code plus lisible
  // et plus facile à déboguer (contrairement au mode 'production' qui optimise le code)
  mode: 'development',
  // Configuration du serveur de développement
  devServer: {
    // Le serveur sera accessible sur le port 8081 
    // (exemple: http://localhost:8081)
    port: XXXX,
  },
  // Liste des plugins que Webpack va utiliser
  plugins: [
    // On configure le plugin HtmlWebpackPlugin
    new HtmlWebpackPlugin({
      // Il va utiliser le fichier ./public/index.html comme modèle
      // et y injecter automatiquement les scripts JavaScript générés
      template: './public/XXXXX.html',
    }),
  ],
};
 
 
FICHER INDEX.JS
 
import faker from 'faker';
 
let products = '';
 
for (let i = 0; i < 3; i++) {
for (let i = 0; i < 5; i++) {
  const name = faker.commerce.productName();
  products += `<div>${name}</div>`;
}
 
console.log(products);
 
 
FICHIER PACKAGE.JSON
 
{
  "name": "products",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "start": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "faker": "^5.1.0",
    "html-webpack-plugin": "5.5.0",
    "nodemon": "^2.0.15",
    "webpack": "^5.88.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "4.7.4"
  }
}