Un'introduzione al Webpack per principianti

Che cos'è il Webpack?

Webpack è uno strumento che ti consente di compilare moduli JavaScript. È anche noto come un modulo bundler.

Dato un gran numero di file, genera un singolo file (o alcuni file) che esegue l'app.

Può eseguire molte operazioni:

  • ti aiuta a raggruppare le tue risorse.
  • osserva le modifiche e esegue nuovamente le attività.
  • può eseguire la transpilation di Babel su ES5, permettendoti di utilizzare le ultime funzionalità JavaScript senza preoccuparti del supporto del browser.
  • può trascrivere CoffeeScript in JavaScript
  • può convertire immagini in linea in URI di dati.
  • ti permette di usare request () per i file CSS.
  • può eseguire un server web di sviluppo.
  • può gestire la sostituzione del modulo a caldo.
  • può dividere i file di output in più file per evitare di avere un enorme file JS da caricare nella prima pagina.
  • può eseguire l'agitazione dell'albero.

Webpack non si limita all'utilizzo sul front-end, ma è utile anche nello sviluppo di backend Node.js.

Esistono molti predecessori di Webpack e molte somiglianze in ciò che fanno quegli strumenti e Webpack. La differenza principale è che tali strumenti sono conosciuti come task runner, mentre Webpack è nato come un bundle di moduli.

Webpack è uno strumento più mirato. Devi solo specificare un punto di accesso alla tua app (potrebbe anche essere un file HTML con tag di script) e webpack analizza i file e li raggruppa in un unico file di output JavaScript che include tutto il necessario per eseguire l'app.

Installazione di Webpack

Webpack può essere installato a livello globale o locale per ciascun progetto.

Installazione globale

Ecco come installarlo a livello globale con Yarn:

filato globale aggiungi webpack webpack-cli

con npm:

npm i -g webpack webpack-cli

una volta fatto, dovresti essere in grado di eseguire

webpack-cli

Installazione locale

Webpack può essere installato anche localmente. È l'impostazione consigliata, poiché Webpack può essere aggiornato per progetto e hai meno resistenza nell'usare le ultime funzionalità solo per un piccolo progetto piuttosto che aggiornare tutti i progetti che hai che utilizzano Webpack.

Con filato:

filato aggiungi webpack webpack-cli -D

con npm:

npm i webpack webpack-cli --save-dev

Una volta fatto, aggiungilo al tuo file package.json:

{
  // ...
  "script": {
    "build": "webpack"
  }
}

Fatto ciò, è possibile eseguire Webpack digitando

costruzione del filato

nella radice del progetto.

Configurazione Webpack

Per impostazione predefinita, Webpack (a partire dalla versione 4) non richiede alcuna configurazione se si rispettano queste convenzioni:

  • il punto di ingresso della tua app è ./src/index.js
  • l'output viene inserito in ./dist/main.js.
  • Webpack funziona in modalità di produzione

Puoi personalizzare ogni piccolo pezzo di Webpack, ovviamente, quando ne hai bisogno. La configurazione Webpack è memorizzata nel file webpack.config.js, nella cartella principale del progetto.

Il punto di ingresso

Per impostazione predefinita, il punto di ingresso è ./src/index.js Questo semplice esempio utilizza il file ./index.js come punto di partenza:

module.exports = {
  /*...*/
  voce: './index.js'
  /*...*/
}

L'output

Per impostazione predefinita, l'output viene generato in ./dist/main.js. Questo esempio inserisce il bundle di output in app.js:

module.exports = {
  /*...*/
  produzione: {
    percorso: path.resolve (__ dirname, 'dist'),
    nome file: 'app.js'
  }
  /*...*/
}

L'utilizzo di Webpack consente di utilizzare l'importazione o richiedere istruzioni nel codice JavaScript non solo per includere altri JavaScript, ma qualsiasi tipo di file (ad esempio CSS).

Webpack mira a gestire tutte le nostre dipendenze, non solo JavaScript, e i caricatori sono un modo per farlo.

Ad esempio, nel tuo codice puoi usare:

import 'style.css'

usando questa configurazione del caricatore:

module.exports = {
  /*...*/
  modulo: {
    regole: [
      {test: /\.css$/, utilizzare: 'css-loader'},
    }]
  }
  /*...*/
}

L'espressione regolare ha come target qualsiasi file CSS.

Un caricatore può avere opzioni:

module.exports = {
  /*...*/
  modulo: {
    regole: [
      {
        test: /\.css$/,
        uso: [
          {
            loader: 'css-loader',
            opzioni: {
              moduli: vero
            }
          }
        ]
      }
    ]
  }
  /*...*/
}

Puoi richiedere più caricatori per ogni regola:

module.exports = {
  /*...*/
  modulo: {
    regole: [
      {
        test: /\.css$/,
        uso:
          [
            'Stile-loader',
            'Css-loader',
          ]
      }
    ]
  }
  /*...*/
}

In questo esempio, css-loader interpreta la direttiva import 'style.css' nel CSS. style-loader è quindi responsabile dell'iniezione di quel CSS nel DOM, usando un tag