Els punts d'entrada són un concepte fonamental en Webpack. Representen el punt de partida des d'on Webpack comença a construir el gràfic de dependències del teu projecte. En altres paraules, són els fitxers que Webpack utilitza com a base per a crear el paquet final.
Què és un Punt d'Entrada?
Un punt d'entrada és un fitxer (o múltiples fitxers) que Webpack utilitza per començar a construir el gràfic de dependències. Aquest gràfic inclou tots els mòduls que el teu projecte necessita per funcionar correctament.
Tipus de Punts d'Entrada
- Punt d'Entrada Únic: El més senzill i comú. Un sol fitxer d'entrada.
- Punts d'Entrada Múltiples: Diversos fitxers d'entrada, útils per a aplicacions més complexes.
Configuració d'un Punt d'Entrada
La configuració dels punts d'entrada es fa al fitxer de configuració de Webpack (webpack.config.js). Aquí tens un exemple bàsic:
Exemple de Punt d'Entrada Únic
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
}
};Explicació del Codi
entry: Especifica el fitxer d'entrada. En aquest cas,./src/index.js.output: Defineix on es guardarà el fitxer de sortida i com es dirà. Aquí,bundle.jses guardarà a la carpetadist.
Exemple de Punts d'Entrada Múltiples
// webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
admin: './src/admin.js'
},
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist'
}
};Explicació del Codi
entry: Ara és un objecte amb múltiples punts d'entrada (appiadmin).output: Utilitza[name]per a generar fitxers de sortida amb els noms dels punts d'entrada (app.bundle.jsiadmin.bundle.js).
Exercicis Pràctics
Exercici 1: Configuració d'un Punt d'Entrada Únic
- Crea un fitxer
webpack.config.jsa l'arrel del teu projecte. - Configura un punt d'entrada únic que apunti a
./src/index.js. - Defineix la sortida perquè es guardi a
./dist/bundle.js.
Solució
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
}
};Exercici 2: Configuració de Punts d'Entrada Múltiples
- Modifica el teu
webpack.config.jsper tenir dos punts d'entrada:./src/app.jsi./src/admin.js. - Configura la sortida perquè generi
app.bundle.jsiadmin.bundle.jsa la carpetadist.
Solució
// webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
admin: './src/admin.js'
},
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist'
}
};Errors Comuns i Consells
Errors Comuns
- Ruta Incorrecta: Assegura't que les rutes dels fitxers d'entrada són correctes.
- Nom de Fitxer de Sortida: Si utilitzes punts d'entrada múltiples, no oblidis utilitzar
[name]al nom del fitxer de sortida.
Consells
- Organització: Mantingues els teus fitxers d'entrada ben organitzats per facilitar la gestió del projecte.
- Documentació: Consulta la documentació oficial de Webpack per a més detalls i exemples avançats.
Conclusió
Els punts d'entrada són essencials per a qualsevol configuració de Webpack. Entendre com configurar-los correctament és el primer pas per a construir aplicacions eficients i ben organitzades. Amb aquesta base, estàs preparat per avançar cap a configuracions més complexes i optimitzades.
En el següent tema, explorarem la configuració de sortida, que és igualment important per a definir com i on es guardarà el teu paquet final.
Curs de Webpack
Mòdul 1: Introducció a Webpack
- Què és Webpack?
- Configuració de Webpack
- Fitxer de Configuració de Webpack
- Construcció Bàsica amb Webpack
Mòdul 2: Conceptes Bàsics
Mòdul 3: Configuració Avançada
Mòdul 4: Eines de Desenvolupament
Mòdul 5: Optimització per a Producció
Mòdul 6: Integracions i Tècniques Avançades
- Integració amb Babel
- Integració amb TypeScript
- Ús de Webpack amb React
- Ús de Webpack amb Vue
- Plugins i Loaders Personalitzats
Mòdul 7: Projectes del Món Real
- Configuració d'un Projecte React
- Configuració d'un Projecte Vue
- Configuració d'un Projecte Node.js
- Migració de Projectes Heretats a Webpack