Els mapes de fonts (source maps) són una eina essencial per a la depuració de codi en aplicacions web modernes. Permeten als desenvolupadors veure el codi original, abans de ser transformat per Webpack, en les eines de desenvolupament del navegador. Això és especialment útil quan es treballa amb codi minificat o transformat (per exemple, codi JavaScript transpilat des de TypeScript o Babel).

Els mapes de fonts són fitxers que mapegen el codi transformat (com el codi minificat o transpilat) al codi original. Això permet que les eines de desenvolupament del navegador mostrin el codi original en lloc del codi transformat, facilitant la depuració.

• Depuració més fàcil: Permeten veure el codi original en les eines de desenvolupament del navegador.
• Millor traçabilitat: Faciliten la identificació de l'origen dels errors.
• Millor experiència de desenvolupament: Fan que el procés de depuració sigui més intuïtiu i eficient.

Per habilitar els mapes de fonts en Webpack, cal configurar l'opció devtool en el fitxer de configuració de Webpack (webpack.config.js).

Webpack ofereix diverses opcions per a devtool, cadascuna amb diferents nivells de precisió i velocitat. A continuació es mostra una taula amb algunes de les opcions més comunes:

Configurar un projecte Webpack per utilitzar mapes de fonts i verificar el seu funcionament en les eines de desenvolupament del navegador.

1. Crea un projecte nou:

   mkdir webpack-source-maps
   cd webpack-source-maps
   npm init -y
   npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev
   

2. Crea l'estructura de fitxers:

   mkdir src
   touch src/index.js webpack.config.js
   

3. Configura Babel i Webpack:

   • webpack.config.js:

     const path = require('path');
     
     module.exports = {
       mode: 'development',
       entry: './src/index.js',
       output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'dist')
       },
       devtool: 'source-map',
       module: {
         rules: [
           {
             test: /\.js$/,
             exclude: /node_modules/,
             use: {
               loader: 'babel-loader',
               options: {
                 presets: ['@babel/preset-env']
               }
             }
           }
         ]
       }
     };
     

   • .babelrc:

     {
       "presets": ["@babel/preset-env"]
     }
     

4. Escriu codi JavaScript:

   • src/index.js:

     const greet = (name) => {
       console.log(`Hello, ${name}!`);
     };
     
     greet('World');
     

5. Construeix el projecte:

   npx webpack
   

6. Verifica els mapes de fonts:

   • Obre dist/index.html en un navegador.
   • Obre les eines de desenvolupament (F12 o clic dret -> "Inspect").
   • Navega a la pestanya "Sources" i verifica que pots veure el codi original en lloc del codi transformat.

Els mapes de fonts són una eina poderosa per a la depuració de codi en aplicacions web modernes. Configurar-los en Webpack és senzill i pot millorar significativament l'experiència de desenvolupament. Amb aquesta configuració, els desenvolupadors poden veure i depurar el codi original, facilitant la identificació i resolució d'errors.