Creazione file configurazione di Webpack

Creazione file configurazione di Webpack

Giuseppe Speranza Di Giuseppe Speranza


webpack js

Ricordo che la repository di tutto quello sviluppato potete trovarla al seguente LINK. Inoltre i branch saranno numerati in base alla lezione. Il branch relativo a quest’articolo è webpack_course_002

Puoi switchare nel branch relativo a quest’articolo con il comando: git checkout webpack_course_002

Come creare il file di configurazione di Webpack

Dopo aver creato il nostro primissimo progetto Webpack, senza alcuna impostazione particolare, procediamo ora con la creazione del file di configurazione, necessario per poter sfruttare al massimo i meccanismi di ottimizzazione e di modularizzazione di questo fantastico strumento.

Creazione file webpack.config.js

Partiamo creando un file chiamato webpack.config.js nella root del progetto.

Dopo averlo creato dovresti avere una struttura delle cartelle identica a questa:

  • NOME_PROGETTO
    • package.json
    • package-lock.json 
    • .gitignore 
    • webpack.config.js
    • dist/
  • index.html
    • src/
  • index.js

webpack.config.js

const path = require('path'); // funzione fornita da Node.js

module.exports = {
  mode: 'development',
  entry: './src/index.js', // file iniziale letto da webpack
  output: {
    filename: 'main.js', // file generato per il bundle
    path: path.resolve(__dirname, 'dist'),
   },
};

Per poter sfruttare questo file di configurazione bisogna istruire lo script creato nel package.json in modo che punti proprio a questo file! A tal fine basta aggiungere il parametro --config [NOME_FILE_CONFIGURAZIONE] in questo modo:

"scripts": {
  "build": "webpack --config webpack.config.js"
},

In applicativi più grandi è norma comune creare diversi file di configurazione che modificano variabili d’ambiente e gestiscono alcuni processi di build in modo differente a seconda dell’ambiente target di deploy ad esempio!

Nei prossimi articoli andremo sempre più ad approfondire la configurazione, vedremo come aggiungere loader e plugin al nostro progetto, gestiremo quindi file con diverse estensioni e la creazione in automatico del file index.html. Stay tuned! Alla Prossima Lezione!

Impara a programmare in 3 mesi con il Corso di Coding Hackademy su Laravel PHP

Diventa Sviluppatore web in 3 mesi

Scopri il coding bootcamp Hackademy

Programma Completo