Creazione file configurazione di Webpack

Ricordiamo che puoi trovare la repository di quanto sviluppato 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 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

• package.json
• package-lock.json 
• .gitignore 
• webpack.config.js
• dist/

• src/

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!