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

Shoulder 2021-09-15 07:26:43
webpack premier aper concept 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://qdmana.com/2021/09/20210914164426001g.html

  1. 350 questions d'entrevue Android partage, technologie d'architecture de cache
  2. The space is not vulgar, the configuration is rich, the leather is durable, less worry, and the high configuration is less than 100000!
  3. Vous permet de passer rapidement à travers l'entrevue de saut d'octets et d'aller de l'avant
  4. Résumé des questions d'entrevue technique d'Alibaba Baidu et d'autres grandes usines à la fin de l'année, et analyse de la dernière vraie question d'entrevue Android en 2021
  5. Avec cet ensemble de questions d'entrevue Java, l'ensemble de questions de base d'entrevue de bat,
  6. Avec cet ensemble de questions d'entrevue Java, les notes avancées Java de niveau divin sont systématisées,
  7. Opérateurs arithmétiques et opérateurs de comparaison pour JavaScript, Introduction classique au développement web
  8. Explorer le cadre open source Android - 1. Okhttp Source Analysis
  9. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  10. Partager l'expérience de l'examen et du développement de l'arrière - plan, en s'appuyant sur les questions d'entrevue et les réponses,
  11. Site Web pour partager vos expériences d'entrevue, Tencent Bull vous apprend à écrire votre propre cadre Java!
  12. Notes d'étape Android structurées, sélection de vrais problèmes d'entrevue Android
  13. Dictionnaire distribué: communication de cache limitée par le courant, sujets d'entrevue pour certaines questions courantes dans le développement Java,
  14. Tianci girlfriend Tangyuan attended the event for the second time. Her appearance was comparable to that of a star. The audience shouted that Tianci was blessed!
  15. Introduction au JavaScript chapitre 15 (objets, clairvoyance)
  16. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  17. Basic knowledge of components in Vue "I"
  18. J'a i appris quelques petites choses sur l'entrevue et j'ai acheté un tutoriel en 19998.
  19. Dix minutes pour vous faire passer en revue les points de connaissance que Spring demande souvent, le chemin du retour Jedi d'un programmeur âgé de 35 ans,
  20. Want to know the implementation and application of single instance mode in the front end?
  21. Progressive react source code analysis - Implementation of ref API
  22. Webpack5 learning -- code compression
  23. Front and back end data interaction (V) -- what is Axios?
  24. Knowledge points related to react routing
  25. On demand introduction of react antd + customized theme
  26. GPG management submission signature verification
  27. [babylonjs] babylonjs practice (XII) -- drawing lane lines
  28. After brushing the 12 sliding windows, you can tear the front end by hand
  29. Vue fruit bookkeeping - money.vue component
  30. Propriétés et méthodes des objets Array en javascript!,Pseudo - classes et pseudo - éléments pour CSS
  31. JS contains the function code
  32. Typescript record (I)
  33. Take you to learn more about nginx basic login authentication: generating passwords using OpenSSL
  34. Is componentization obsolete? Introduction to micro front end architecture
  35. Leetcode day 18
  36. Simple code to achieve a, 1W + people see the Mid Autumn Festival blessing
  37. Design pattern -- agent pattern
  38. Vs Code theme recommendation in 2021
  39. Mon expérience réelle dans l'externalisation Android à Huawei, préparation de l'entrevue de développement Android
  40. J'ai les questions et les réponses d'entrevue de développement d'octets de rêve et Tencent double offer, Android
  41. Fatal Magic: countless sacrifices under gorgeous magic
  42. Mon expérience d'entrevue principale est partagée avec l'expérience d'apprentissage
  43. Mon expérience d'entrevue Android de Tencent partage, plugin Android
  44. Partage de questions d'entrevue Java à double saut d'octets non - premier cycle, un article vous apprend à gérer l'entrevue réseau informatique,
  45. Questions d'entrevue CSS (notes)
  46. Syntaxe de base de la classe
  47. Héritage de classe
  48. Mise en œuvre simple de 30 minutes pour un filtrage rapide des chaînes de tableau 10W +.
  49. Vue 3 tri des documents démarrage rapide
  50. Collection de code de base JavaScript (1)
  51. National secret nginx Container actual Fighting
  52. Quelques lignes de css pour rendre votre page tridimensionnelle
  53. C'est super détaillé, de "finir" ce 300 pages de 1000 questions d'entrevue,
  54. Take you in-depth understanding of nginx basic login authentication (including all configuration steps and in-depth analysis)
  55. Après avoir mangé, assurez - vous d'augmenter votre salaire de 5K et de rester debout tard pour trier les questions d'entrevue Java de millet.
  56. Résumé des questions d'entrevue pour les entreprises Internet nationales de première ligne, qui doivent être posées lors de l'entrevue d'emploi Java de la grande usine en 2021,
  57. "L'amour à première vue", la nouvelle BMW 2 coupe réelle, vous êtes surpris?
  58. Questions d'entrevue de test avancé de Dachang, liste des compétences de base de l'entrevue Java,
  59. Tableau 2D trié par un champ
  60. JS est souvent utilisé pour déterminer si l'objet est vide