Condivisione della tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Ingegneria front-end: guida alla configurazione del Webpack

Amici front-end, oggi parleremo del Webpack che le persone amano e odiano. Sì, è lo strumento di creazione configurato per farti venir voglia di spaccare la tastiera, ma non puoi vivere senza di essa. Non preoccuparti, seguimi e ti garantisco che ti trasformerai da principiante di Webpack a maestro della configurazione!

Cos'è Webpack?

In poche parole, Webpack è uno strumento di confezionamento di moduli statici per le moderne applicazioni JavaScript. Quando Webpack elabora un'applicazione, crea internamente un grafico delle dipendenze che mappa ogni modulo richiesto dal progetto e genera uno o più bundle.

Sembra elevato? In realtà, si tratta di organizzare e impacchettare i file di codice disordinati in file che il browser possa comprendere ed eseguire. È come una donna delle pulizie che lavora duro e tiene in ordine tutti i vestiti, i libri e i giocattoli di casa tua.

Configurazione di base

Innanzitutto, diamo un'occhiata alla configurazione di base di Webpack.Crearewebpack.config.js File, questa è la nostra configurazione base:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
1
2
3
4
5
6
7
8
9

Qui,entry specifica il punto di ingresso dell'applicazione,output Indica a Webpack dove visualizzare i bundle creati e come denominare questi file.

Caricatore: consente a Webpack di comprendere vari file

Webpack stesso comprende solo file JavaScript e JSON. I caricatori consentono a Webpack di elaborare altri tipi di file e di convertirli in moduli validi per l'utilizzo da parte delle applicazioni.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

hai visto? Diciamo a Webpack: "Ehi, fratello, usa style-loader e css-loader per elaborare i file .css e usa file-loader per elaborare le immagini È così semplice!"

Plugin: la magia di Webpack

I plugin sono la spina dorsale di Webpack. Possono essere utilizzati per gestire una varietà di attività, dall'ottimizzazione e compressione del packaging, alla ridefinizione delle variabili nell'ambiente.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '我的超酷网页',
    }),
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12

Qui utilizziamo CleanWebpackPlugin per pulire /dist cartella e HtmlWebpackPlugin per generare un file HTML. È come installare due assistenti di destra per Webpack, uno responsabile della pulizia e l'altro responsabile della decorazione della stanza.

Modalità: sviluppo o produzione?

Webpack fornisce mode Opzioni di configurazione che indicano a Webpack di utilizzare le ottimizzazioni integrate per la modalità corrispondente:

module.exports = {
  mode: 'production', // 或者 'development'
  // ...
};
1
2
3
4

Se impostato su "produzione", Webpack abiliterà automaticamente una serie di plug-in di ottimizzazione, come la compressione del codice JS. La modalità "sviluppo" si concentra su build veloci e un'ottima esperienza di sviluppo. È come indossare due cappelli per Webpack, uno è un cappello da lavoro e l'altro è un cappello da vacanza.

Server di sviluppo: l'emozione degli aggiornamenti interessanti

Utilizza webpack-dev-server per fornire un semplice server web che può essere ricaricato in tempo reale:

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};
1
2
3
4
5
6
7

Dopo questa configurazione, se modifichi il codice, il browser si aggiornerà automaticamente. È come mettere un turbocompressore nel tuo processo di sviluppo!

Separazione dei codici: non mettere tutte le uova nello stesso paniere

La suddivisione del codice è una delle funzionalità più interessanti di Webpack. Ti consente di dividere il tuo codice in vari pacchetti, che possono poi essere caricati su richiesta o in parallelo.

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};
1
2
3
4
5
6
7
8

Questa configurazione dice a Webpack: "Ehi, aiutami a estrarre il codice comune e a comprimerlo separatamente." Questo può evitare il caricamento ripetuto di moduli e ridurre la dimensione del pacchetto principale. È come fare di nuovo la valigia, mettendo gli oggetti usati di frequente dove sono più facilmente accessibili.

Scuotimento dell'albero: scrollarsi di dosso i rami e le foglie in eccesso

Tree Shaking è un termine comunemente usato per descrivere la rimozione di codice senza riferimenti all'interno di un contesto JavaScript.

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};
1
2
3
4
5
6

Questa configurazione abiliterà automaticamente lo scuotimento dell'albero in modalità produzione. Analizzerà il tuo codice per scoprire quale codice non viene utilizzato, quindi "poterà" questi codici inutili come un giardiniere che pota gli alberi.

Riassumere

Ok, dopo tutto questo armeggiare, dovresti avere una conoscenza completa della configurazione di Webpack. Dalla configurazione di base alle funzionalità avanzate, abbiamo coperto le principali funzioni di Webpack. Ricorda, Webpack è come un potente coltellino svizzero e utilizzarlo correttamente può migliorare notevolmente l'efficienza dello sviluppo e le prestazioni delle applicazioni.

Naturalmente il mondo di Webpack è molto più di questo. Ci sono funzionalità più avanzate che aspettano di essere esplorate, come il caricamento lento, il precaricamento, la memorizzazione nella cache, ecc. Tuttavia, dopo aver padroneggiato queste nozioni di base, puoi già dire con orgoglio: "Sono anche un maestro della configurazione di Webpack!"

Infine, non dimenticare di controllare frequentemente la documentazione ufficiale di Webpack. Perché nel mondo in rapida evoluzione del front-end, ciò che ieri era la migliore pratica potrebbe essere obsoleto oggi. Continua ad apprendere ed esplorare e sarai in grado di andare sempre più lontano sulla strada dell'ingegneria front-end.

Ora prendi la tastiera e inizia il tuo viaggio nella configurazione di Webpack! Ricorda, ogni errore è un trampolino di lancio per diventare un maestro. Forza, colpisci gli operai!

Mini programma di interviste ad Haima

Include la più recente condivisione delle esperienze di intervista, l'analisi delle domande reali dell'intervista, una banca dati completa di oltre 2000 domande e spiegazioni dettagliate dei manuali tecnici dell'intervista front-end e back-end, sia che tu stia intervistando per il reclutamento scolastico o il reclutamento sociale o se lo desideri per migliorare le tue capacità di programmazione, puoi affrontarlo con calma~

di una pietra del selciato. Forza, colpisci gli operai!

Mini programma di interviste ad Haima

Include la più recente condivisione delle esperienze di intervista, l'analisi delle domande reali dell'intervista, una banca dati completa di oltre 2000 domande e spiegazioni dettagliate dei manuali tecnici dell'intervista front-end e back-end, sia che tu stia intervistando per il reclutamento scolastico o il reclutamento sociale o se lo desideri per migliorare le tue capacità di programmazione, puoi affrontarlo con calma~

[Le immagini del collegamento esterno sono in fase di trasferimento...(img-LBHUGtbe-1720689041341)]