Partage de technologie

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

Ingénierie front-end : guide de configuration du Webpack

Amis front-end, nous allons parler aujourd’hui du Webpack que les gens aiment et détestent. Oui, c’est l’outil de construction configuré pour vous donner envie de briser votre clavier, mais vous ne pouvez pas vous en passer. Ne vous inquiétez pas, suivez-moi et je vous garantis que vous passerez de novice Webpack à maître de configuration !

Qu’est-ce que Webpack ?

En termes simples, Webpack est un outil d'empaquetage de modules statiques pour les applications JavaScript modernes. Lorsque Webpack traite une application, il crée en interne un graphe de dépendances qui mappe chaque module requis par le projet et génère un ou plusieurs bundles.

Cela semble élevé ? En fait, il s'agit d'organiser et de regrouper vos fichiers de code désordonnés dans des fichiers que le navigateur peut comprendre et exécuter. C'est comme une femme de ménage très travailleuse qui garde en ordre tous les vêtements, livres et jouets de votre maison.

Configuration de base

Jetons d’abord un coup d’œil à la configuration de base de Webpack.Créerwebpack.config.js Fichier, voici notre base de configuration :

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

ici,entry précise le point d'entrée de l'application,output Indique à Webpack où afficher les bundles qu'il crée et comment nommer ces fichiers.

Loader : laissez Webpack comprendre divers fichiers

Webpack lui-même ne comprend que les fichiers JavaScript et JSON. Les chargeurs permettent à Webpack de traiter d'autres types de fichiers et de les convertir en modules valides pouvant être utilisés par les applications.

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

avez-vous vu? Nous disons à Webpack : "Hé, mon frère, utilise style-loader et css-loader pour traiter les fichiers .css, et utilise file-loader pour traiter les images."

Plugins : La magie de Webpack

Les plugins sont l’épine dorsale de Webpack. Ils peuvent être utilisés pour gérer diverses tâches, depuis l’optimisation et la compression du packaging jusqu’à la redéfinition des variables dans l’environnement.

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

Ici, nous utilisons CleanWebpackPlugin pour nettoyer /dist dossier et HtmlWebpackPlugin pour générer un fichier HTML. C'est comme installer deux assistants de droite pour Webpack, l'un chargé du ménage et l'autre chargé de la décoration de la pièce.

Mode : développement ou production ?

Webpack fournit mode Options de configuration qui indiquent à Webpack d'utiliser les optimisations intégrées pour le mode correspondant :

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

Lorsqu'il est défini sur « production », Webpack activera automatiquement un certain nombre de plugins d'optimisation, tels que la compression du code JS. Le mode « développement » se concentre sur des constructions rapides et une excellente expérience de développement. C'est comme mettre deux chapeaux pour Webpack, l'un est un chapeau de travail et l'autre est un chapeau de vacances.

Serveur de développement : le frisson des mises à jour à chaud

Utilisez webpack-dev-server pour fournir un serveur Web simple qui peut être rechargé en temps réel :

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

Après cette configuration, si vous modifiez le code, le navigateur se rafraîchira automatiquement. C’est comme mettre un turbocompresseur dans votre processus de développement !

Séparation des codes : ne mettez pas tous vos œufs dans le même panier

Le fractionnement du code est l'une des fonctionnalités les plus intéressantes de Webpack. Il vous permet de diviser votre code en différents packages, qui peuvent ensuite être chargés à la demande ou en parallèle.

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

Cette configuration indique à Webpack : "Hé, aidez-moi à extraire le code commun et à le conditionner séparément." Cela peut éviter le chargement répété des modules et réduire la taille du package principal. C'est comme refaire votre valise, en plaçant les objets fréquemment utilisés là où ils sont le plus facilement accessibles.

Secouage des arbres : secouer les branches et les feuilles en excès

Tree Shaking est un terme couramment utilisé pour décrire la suppression de code non référencé dans un contexte JavaScript.

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

Cette configuration activera automatiquement Tree Shaking en mode production. Il analysera votre code pour découvrir quel code n'est pas utilisé, puis "élaguera" ces codes inutiles comme un jardinier élague des arbres.

Résumer

D'accord, après toutes ces manipulations, vous devriez avoir une compréhension globale de la configuration de Webpack. De la configuration de base aux fonctionnalités avancées, nous avons couvert les principales fonctions de Webpack. N'oubliez pas que Webpack est comme un puissant couteau suisse et que son utilisation correcte peut considérablement améliorer l'efficacité de votre développement et les performances de vos applications.

Bien entendu, le monde de Webpack est bien plus que cela. Il existe des fonctionnalités plus avancées qui vous attendent, telles que le chargement différé, le préchargement, la mise en cache, etc. Cependant, après avoir maîtrisé ces bases, vous pouvez déjà dire avec fierté : « Je suis aussi un maître de la configuration Webpack !

Enfin, n’oubliez pas de consulter fréquemment la documentation officielle de Webpack. Parce que dans le monde en évolution rapide du front-end, ce qui était hier une bonne pratique peut être dépassé aujourd’hui. Continuez à apprendre et à explorer, et vous pourrez aller de plus en plus loin sur la voie de l’ingénierie front-end.

Maintenant, prenez votre clavier et commencez votre parcours de configuration Webpack ! N'oubliez pas que chaque erreur est un tremplin sur votre chemin pour devenir un maître. Allez, frappez les ouvriers !

Mini programme d'interview de Haima

Il comprend le dernier partage d'expériences d'entretien, l'analyse de questions d'entretien réelles, une banque complète de plus de 2000 questions et des explications détaillées des manuels techniques d'entretien front-end et back-end, que vous passiez un entretien pour un recrutement scolaire ou un recrutement social ou que vous souhaitiez ; pour améliorer vos compétences en programmation, vous pouvez y faire face calmement~

d'un pavé. Allez, frappez les ouvriers !

Mini programme d'interview de Haima

Il comprend le dernier partage d'expériences d'entretien, l'analyse de questions d'entretien réelles, une banque complète de plus de 2000 questions et des explications détaillées des manuels techniques d'entretien front-end et back-end, que vous passiez un entretien pour un recrutement scolaire ou un recrutement social ou que vous souhaitiez ; pour améliorer vos compétences en programmation, vous pouvez y faire face calmement~

[Les images de liens externes sont en cours de transfert...(img-LBHUGtbe-1720689041341)]