Webpack és un empaquetador de mòduls per a aplicacions JavaScript modernes. És una eina que permet agrupar tots els recursos del teu projecte (JavaScript, CSS, imatges, etc.) en un o més fitxers de sortida, optimitzant-los per a la producció. Webpack és especialment útil per a projectes grans i complexos, ja que ajuda a gestionar les dependències i a millorar el rendiment de l'aplicació.

• Definició: Un mòdul és qualsevol peça de codi que es pot importar o exportar en JavaScript. Pot ser un fitxer JavaScript, un fitxer CSS, una imatge, etc.
• Exemple: Un fitxer main.js que importa una funció d'un altre fitxer utils.js.

• Definició: El procés d'agrupar diversos mòduls en un o més fitxers de sortida.
• Benefici: Redueix el nombre de sol·licituds HTTP necessàries per carregar una pàgina web, millorant així el rendiment.

• Definició: Transformen els fitxers de diferents tipus (CSS, imatges, etc.) en mòduls que Webpack pot processar.
• Exemple: css-loader per carregar fitxers CSS.

• Definició: Extensions que permeten personalitzar el procés de construcció de Webpack.
• Exemple: HtmlWebpackPlugin per generar automàticament un fitxer HTML que inclogui tots els bundles.

• Avantatge: Webpack analitza les dependències entre els mòduls i crea un gràfic de dependències, assegurant que els mòduls es carreguin en l'ordre correcte.

• Avantatge: Webpack ofereix diverses tècniques d'optimització com la minificació, la divisió de codi (code splitting) i el tree shaking per eliminar codi no utilitzat.

• Avantatge: Facilita la creació de codi modular, fent que el manteniment i l'escalabilitat del projecte siguin més senzills.

• Avantatge: Webpack es pot integrar fàcilment amb altres eines i frameworks com Babel, React, Vue, etc.

Crear una configuració bàsica de Webpack que empaqueti un fitxer JavaScript i un fitxer CSS.

1. Crea un directori de projecte i inicialitza un projecte Node.js:

   mkdir my-webpack-project
   cd my-webpack-project
   npm init -y
   

2. Instal·la Webpack i Webpack CLI:

   npm install --save-dev webpack webpack-cli
   

3. Crea els fitxers següents:

   • src/main.js
   • src/utils.js
   • src/styles.css
   • webpack.config.js

4. Afegeix el codi següent als fitxers:

   • src/utils.js:

     export function greet(name) {
         return `Hello, ${name}!`;
     }
     

   • src/main.js:

     import { greet } from './utils';
     import './styles.css';
     
     console.log(greet('World'));
     

   • src/styles.css:

     body {
         background-color: #f0f0f0;
         font-family: Arial, sans-serif;
     }
     

   • webpack.config.js:

     const path = require('path');
     
     module.exports = {
         entry: './src/main.js',
         output: {
             filename: 'bundle.js',
             path: path.resolve(__dirname, 'dist')
         },
         module: {
             rules: [
                 {
                     test: /\.css$/,
                     use: ['style-loader', 'css-loader']
                 }
             ]
         }
     };
     

5. Executa Webpack per crear el bundle:

   npx webpack
   

Després d'executar Webpack, hauríeu de veure un fitxer bundle.js dins del directori dist. Aquest fitxer conté el codi JavaScript i CSS empaquetat.

En aquesta secció, hem après què és Webpack, els seus conceptes clau i per què és útil per a la gestió de projectes JavaScript moderns. També hem vist exemples pràctics i hem realitzat un exercici per crear una configuració bàsica de Webpack. En el següent tema, explorarem com configurar Webpack en un projecte des de zero.