编程知识 cdmana.com

Webpack - - Premier aperçu (concept de base)

WebpackEn tant qu'emballeur de modules,Je crois que les petits partenaires de développement de première ligne en savent plus ou moins. Si vous venez de toucher,J'espère que cet article vous ouvrira une première connaissanceWebpackLa porte de.

Compris.

webpack Qu'est - ce que c'est??

Comme je l'ai dit au début,webpackC'est un packer modulaire. Le plus tôt possible,WebpackJuste un.JSOutils d'emballage,MaintenantWebpackDe plus en plus puissant,Non seulement il peut être emballéJS,Et emballerCSS、Photos et autres documents. webpack.jpeg

Webpack Principe de fonctionnement de base

Avant de comprendre comment ça marche,Nous devons comprendre plusieurs concepts de base:

  1. Structure de l'arbre:Introduire des ressources dans le fichier d'entrée,Une vue arborescente de toutes les dépendances.
  2. Module:PourWebpackDis,Toutes les ressources sont des modules.
  3. chunk:Lors de l'emballage des modules,Le fichier du module à utiliser s'appellechunk.
  4. bundlebundleC'est un fichier emballé,C'est ce que“Ressources statiques”.

Après avoir connu quelques concepts,Regardez simplement le processus de base:

Principe d'emballage.jpeg

Pensez simplement ,WebpackTravail, C'est de prendre les petits morceaux de code que vous avez écrit , Emballé selon la vue arborescente des dépendances , Enfin, un fichier d'emballage lisible par le navigateur .

Essai préliminaire

Maintenant que vous savez à peu près webpackQu'est - ce que c'est?. On a commencé à remuer nos manches et à essayer !

Travaux préparatoires(Installation)

Commencez par créer un répertoire d'entrepôt de code ,Puis allez dans le répertoire,Ouvrir le terminal,Mise en œuvrenpm init Pour initialiser le projet .Après une initialisation réussie, Il apparaît dans le répertoire package.jsonDocumentation.

Puis installezwebpackEtwebpack-cli.

Créer une structure de répertoire

Créer une telle structure de répertoire sur la racine du projet :

  src
  |__ index.js
  |__ one.js
  |__ two.js
Copier le Code

Intwo.js Écris quelque chose :

  const a = 10,
        b = 20,
        c = 604;
  module.exports = { a, b, c};
Copier le Code

Et aprèsone.jsLieutenant - généraltwo.jsIntroduction:

  import { a, b, c } from './two.js';
  export default sum = a+b+c;
Copier le Code

Encore.index.jsLieutenant - généralone.jsIntroduction:

  const sum = require('./two.js');
  console.log(sum);
Copier le Code

Configurationwebpack

Avant la configuration, J'ai besoin de savoir ce qui va se passer ensuite webpackÉléments de configuration:

  • entry:Entrée.Dis - le.webpack Quel module devrait être utilisé comme point de départ pour construire son arbre de dépendance interne .
  • output:Exportations.Dis - le.webpack Où exporter ce qu'il crée bundle, Et comment nommer ces fichiers .
  • context: Utilisé pour résoudre entryloaderplugin Chemin relatif dans (Sauf queoutput).À propos deloaderEtpluginLe rôle de, On en reparlera plus tard .

Créer un webpack.config.js,Démarrer la configuration:

 // IntroductionpathSac,C'est...nodeJS Paquets intégrés pour gérer les chemins 
 const path = require('path');
  
  module.exports = {
    //  Définir le chemin relatif de résolution ,path.resolve Oui../ Parse to Absolute path 
    // __dirnamePointer vers le courantjsChemin absolu du fichier
    context: path.resolve(__dirname, './'),
    //  Configurer le portail 
    entry: './src/one.js',
    output: {
      filename: 'build.js',
      //  Définir le Répertoire de sortie ,path.join Connectez le chemin en utilisant le séparateur de chemin du système actuel 
      path: path.join(__dirname, 'dist')
    }   
  };
Copier le Code

C'est tout.,webpack La configuration la plus élémentaire est terminée ,Exécution suivantewebpack Les commandes pertinentes sont ok .

Pour faciliter l'exécution ,Àpackage.jsonConfigurerwebpack Commandes de compilation pour :

 {
   // ...
   "scripts": {
     "build": "webpack --config webpack.config.js"
   }
   // ...
 }
Copier le Code

Ensuite, sur le terminal du répertoire courant npm run build, Nous allons exécuter ce que nous avons configuré ci - dessus webpackJ'ai donné l'ordre.

版权声明
本文为[Shoulder]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210914164426001g.html

Scroll to Top