1. Quelles sont les ressources statiques courantes dans les pages Web?
- Js:
- .js .jsx .coffee .ts
- Css:
- .css .less .sass .scss
- Images:
- .jpg .png .gif .bmp .svg
- Fichier de police:
- .svg .ttf .eot .woff .woff2
- Fichier modèle:
- .ejs .jade .vue
2. Quels sont les problèmes après avoir introduit plus de ressources statiques dans la page Web?
- La page se charge lentement car nous devons lancer de nombreuses secondes demandes
- Pour gérer les dépendances complexes, telles que l'introduction de bootstrap, jquery
3. Comment résoudre les deux problèmes ci-dessus:
- Encodage Base64 de fusion, compression, image sprite, image
- Vous pouvez utiliser uniquement les J requis que vous avez appris auparavant, ou vous pouvez utiliser le webpack pour résoudre les dépendances complexes entre les différents packages
4. Qu'est-ce que le webpak?
Webpack est un outil de construction de projet frontal, qui est un outil frontal développé sur la base de nodejs.
5. Comment réaliser parfaitement les deux solutions ci-dessus?
- L'utilisation de Gulp est basée sur des tâches de tâche
- L'utilisation de webpack est basée sur l'ensemble du projet
- Avec l'aide de webpack, un outil de construction automatisé frontal, de nombreuses fonctions telles que la fusion de ressources, l'empaquetage, la compression et l'obscurcissement peuvent être parfaitement réalisées.
6. Installation de Webpack
- Exécutez
npm install webpack -gun webpack d'installation globale, de sorte que vous pouvez utiliser webpack commandes globales. - Exécutez et
npm install webpack --save-devinstallez dans le répertoire racine du projet vers les dépendances du projet
7. Boîtier de démonstration
Besoin d'introduire le webpack à l'échelle mondiale et d' npm install jquery --saveinstaller jquery dans le projet .
Structure du répertoire des petits cas
code index.html:
Code main.js:
Résultats de l'emballage:
