Maison >interface Web >js tutoriel >Entrée, sortie, analyse du module de webpack3.x

Entrée, sortie, analyse du module de webpack3.x

php中世界最好的语言original: 2018-03-10 13:56:072032parcourir

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 installer

webpack : 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

Entrée, sortie, analyse du module de webpack3.x webpack.config) ; Configuration .js (il y en a tellement pour l'instant) ;

Tout d'abord, parlons de l'utilisation de cette configuration. Elle indique en fait à webpack comment les emballer ; par un;

Entrée, sortie, analyse du module de webpack3.x Entrée : Oui

Fichier d'entrée

; 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>

Parlons de quelque chose d'important import '.. /css/style1.css'; c'est qu'il y a style1.css sous css dans le répertoire supérieur (src) par rapport à index.js ; par exemple, j'ai écrit l'arrière-plan du corps en bleu ; j'ai également stocké une image sous img ; ;

puis introduit l'image et print.js respectivement

　index.js
import _ from &#39;lodash&#39;;     
import &#39;../css/style1.css&#39;;
import icon1 from &#39;../img/aa00.jpg&#39;;
import printMe from &#39;./print.js&#39;;
function component() {
    var div = document.createElement(&#39;div&#39;);
    var btn = document.createElement(&#39;button&#39;);
    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    div.innerHTML = _.join([&#39;Hello&#39;, &#39;webpack&#39;], &#39; &#39;);
    var img = new Image();
    img.src = icon1;
    div.appendChild(img);
    btn.innerHTML = &#39;Click me and check the console!&#39;;
    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 simples

export default function printMe() {    console.log(&#39;print.js...&#39;);}
    完成之后,直接

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article ; .Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment VUE utilise anmate.css

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment changer d'onglet dans l'onglet Vue2Article suivant：Comment changer d'onglet dans l'onglet Vue2

Articles Liés

Voir plus