Entrée, sortie, analyse du module de webpack3.x
Cette fois, je vous apporterai l'analyse de l'entrée, de la sortie et du module de webpack3.
En tant qu'outil populaire d'aujourd'hui, webpack est indissociable des trois principaux frameworks front-end, il est donc nécessaire de l'apprendre
Prérequis : Il existe un environnement de nœuds et un outil npm ; ; (nouvelle version Le nœud est livré avec l'outil npm)
Commençons étape par étape :
1. Sélectionnez d'abord un répertoire comme emplacement où votre projet est stocké ; 🎜> cmd L'outil entre dans le répertoire du projet (en supposant que le mien soit D: webpack-demo4) ; puis utilisez nmp
pour installerwebpack : npm install webpack --save-dev ("L'installation globale n'est pas recommandée") ;
Utilisez npm init après avoir terminé le répertoire de votre projet, suivi d'un contenu descriptif, si vous souhaitez l'omettre,
. Les répertoires dist et src sont créés par moi-même, dist est utilisé pour stocker les fichiers compilés et src est utilisé pour stocker les fichiers sources ; node_modules est un dossier nouvellement initialisé contenant divers modules. À l'avenir, tous les modules liés à la construction du projet le seront. be (et devrait être) placé dans ce répertoire ; webpack.config.js est l'élément de configuration du webpack ; package.json contient certaines configurations pour les opérations de nœud (en fait, c'est pour le webpack
webpack.config) ; Configuration .js (il y en a tellement pour l'instant) ;
Entrée : Oui
; signifie à partir de quel fichier js il commence ; parlez de ce chemin relatif, celui-ci est calculé à partir du répertoire que vous entrez avec la ligne de commande cmd ; exemple, le mien est :
[ webpack-demo4 ] --> Il y a le répertoire dist et le répertoire src ci-dessous, puis lorsque j'exécute la configuration, je devrais aller sur webpack-demo4 puis sur webpack --config webpack ; -config.js (ou webpack directement) ; Le résultat est Sortie du paramètre : Le résultat du paramètre ci-dessus est qu'une fois le webpack empaqueté, app.bundle.js et print.bundle.js seront généré dans le dossier js du répertoire dist. Le nom est en fait la clé dans l'entrée
dans le module Stocke deux chargeurs pour charger les fichiers et les CSS
Bien sûr, le style d'installation npm ; -loader css loader --save -dev et npm install file-loader --save -dev doivent être installés avant d'exécuter webpack. Je dois accéder au répertoire webpak-demo4
Maintenant, j'ai un index002. html écrit par moi-même dans le répertoire dist : comme suit ;
Il y a deux fichiers js dans le répertoire src<html>
<head>
<title>Output Management(输出)</title>
<meta charset=utf-8>
</head>
<body>
</body>
</html>
<script src="./js/app.bundle.js"></script> index.js
import _ from 'lodash';
import '../css/style1.css';
import icon1 from '../img/aa00.jpg';
import printMe from './print.js';
function component() {
var div = document.createElement('div');
var btn = document.createElement('button');
// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
div.innerHTML = _.join(['Hello', 'webpack'], ' ');
var img = new Image();
img.src = icon1;
div.appendChild(img);
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
div.appendChild(btn);
return div;
}
document.body.appendChild(component()); //放回元素给到页面;print.js :
Les images et les styles de commande apparaîtront ; les js et les images empaquetés apparaîtront dans le répertoire dist ; l'exemple ci-dessus montre comment webpack emballe les CSS, les images et d'autres opérations simplesexport default function printMe() { console.log('print.js...');}
完成之后,直接
Lecture connexe :
Comment résoudre le piratage CSS d'IE11
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
ModuleNotFoundError : Comment résoudre l'erreur de module Python introuvable ?
Jun 25, 2023 pm 09:30 PM
Au cours du processus de développement de Python, nous rencontrons souvent des erreurs de module introuvable. La manifestation spécifique de cette erreur est que Python signale l'une des deux erreurs suivantes : ModuleNotFoundError ou ImportError lors de l'importation du module. Cette erreur est très ennuyeuse et peut empêcher le programme de fonctionner correctement, c'est pourquoi dans cet article, nous explorerons les causes de cette erreur et comment la résoudre. ModuleNotFoundError et ImportError dans Pyth
Java9Nouvelle fonctionnalitéMéthode de programmation modulaire du module
May 19, 2023 pm 01:51 PM
Dans la version Java9, le langage Java a introduit un concept très important : le module. Si vous êtes familier avec la gestion modulaire du code JavaScript, vous devriez vous sentir familier lorsque vous verrez la gestion modulaire de Java 9. 1. Qu'est-ce que le module Java ? Un peu similaires aux packages Java, les modules introduisent un autre niveau de regroupement du code Java. Chacun de ces groupes (modules) contient de nombreux sous-packages. Déclarez le dossier et ses sous-dossiers en tant que module en ajoutant le fichier module-info.java à la racine du package de fichiers de code source d'un module. La syntaxe du fichier
Paramètres de sortie frontale
Feb 19, 2024 am 09:30 AM
La configuration de la sortie frontale nécessite des exemples de code spécifiques. Dans le développement front-end, la configuration de la sortie est une configuration très importante. Il est utilisé pour définir le chemin du fichier, le nom du fichier et les chemins de ressources associés générés après le packaging du projet. Cet article présentera le rôle de la configuration de la sortie frontale, les options de configuration courantes et donnera des exemples de code spécifiques. Le rôle de la configuration de sortie : l'élément de configuration de sortie est utilisé pour spécifier le chemin du fichier et le nom du fichier générés après le packaging du projet. Il détermine le résultat final du projet. Emballé dans un webpack, etc.
Comment résoudre le problème du « fusible de module introuvable » lors du montage d'un disque ntfs sous le système Linux ?
Dec 31, 2023 pm 03:17 PM
1. Confirmez d'abord le noyau du système Linux [root@localhost~]#uname-r-p2.6.18-194.el5i6862. Accédez à http://sourceforge.net/projects/linux-ntfs/files/ pour télécharger le package RPM. du noyau correspondant. Si vous ne trouvez pas exactement le même, vous pouvez trouver le plus proche. Je n'ai pas trouvé exactement le même. Ce que j'ai téléchargé est : kernel-module-ntfs-2.6.18-128.1.1.el5-2.1.27-0.rr.10.11.i686.rpm3 Installez le package rpm rpm. -ivhkernel -m
Output, le concept de base du webpack
Aug 09, 2022 pm 06:32 PM
Une fois que vous avez rassemblé tous vos actifs, vous devez indiquer à Webpack où empaqueter votre application. L'attribut de sortie de webpack décrit comment gérer le code groupé. L'article suivant vous donnera une compréhension approfondie de la sortie (Output) dans le concept de base de webpack. J'espère qu'il vous sera utile !
Module Vuex-Introduction à l'utilisation du partitionnement des entrepôts d'état
Aug 10, 2022 pm 04:01 PM
Vuex comprend principalement les cinq parties suivantes : État, Getter, Mutation, Action et Module. Ci-dessous, je présenterai la segmentation de l'entrepôt d'état du module Vuex. J'espère que cela sera utile aux amis dans le besoin !
PHP génère une image GD dans un navigateur ou un fichier
Mar 21, 2024 am 10:41 AM
Cet article expliquera en détail comment PHP génère des images GD dans un navigateur ou un fichier. L'éditeur pense que c'est assez pratique, je le partage donc avec vous comme référence. J'espère que vous pourrez gagner quelque chose après avoir lu cet article. PHP génère des images GD vers un navigateur ou un fichier Introduction La bibliothèque phpGD fournit des fonctions puissantes pour le traitement des images, vous permettant de créer, d'éditer et de générer des images. Les images peuvent être sorties vers un navigateur ou un fichier pour être affichées ou traitées ultérieurement. Sortie vers un navigateur Pour sortir une image vers un navigateur, procédez comme suit : Créer une ressource image : utilisez la fonction imagecreate() pour créer une ressource image. Charger des données d'image : utilisez imagepng(), imagejpeg() ou imagegif()
Étapes pour exporter des tables wps2019 vers des images
Mar 27, 2024 pm 04:51 PM
1. Utilisez wps2019 pour ouvrir le tableau à modifier. 2. Cliquez sur l'élément de menu [Fichier] dans le coin supérieur gauche de la fenêtre wps2019. 3. Dans le menu déroulant du fichier contextuel, cliquez sur l'élément de menu [Exporter en tant qu'image]. 4. Une fenêtre de sortie vers des images apparaîtra. Sélectionnez le format de qualité de sortie dans la fenêtre. 5. Cliquez sur le menu déroulant Format et sélectionnez le format que vous souhaitez enregistrer en tant qu'image dans le menu contextuel. 6. Enfin, cliquez sur le bouton d'option Enregistrer en arrière-plan pour définir l'emplacement où vous souhaitez enregistrer l'image. 7. Après avoir cliqué sur OK, une invite indiquant que la sortie a réussi apparaîtra après un certain temps.
