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 webpackwebpack.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 : 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>
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!