Webpack
Contraster le développement et l'ingénierie traditionnels
Prenons le développement de la même fonction comme exemple pour comparer et montrer deux méthodes de développement:
- A. Méthode traditionnelle, sans utiliser d'outils de construction
- B. Méthode d'ingénierie, utilisez Webpack
Comparaison schématique
Manière traditionnelle
Toutes les ressources sont directement citées dans le .html. Il est simple et clair pour vous d'écrire, mais il est également pratique pour les autres de copier.
Ingénierie
Lors du développement, écrivez sur le code source;
Lors de la publication, utilisez l'outil (webpack) pour empaqueter dans le code cible (il a été chiffré ici), puis venez introduire le .html
Comparaison détaillée
| Manière traditionnelle | Méthode d'ingénierie | |
|---|---|---|
| Peut-on adopter la modularisation js (introduire un autre js dans un js) | Ne peut pas | pouvez |
| Le code js peut-il être crypté | Ne peut pas | pouvez |
| Le code CSS peut-il être compressé | Ne peut pas | pouvez |
| S'il faut prendre en charge le langage précompilé CSS | Ne peut pas | pouvez |
sommaire
Webpack est un outil.Après avoir introduit cet outil, vous pouvez changer la méthode de développement (développement traditionnel -> développement d'ingénierie) pour améliorer l'efficacité du développement;
Exemples de projets traditionnels
Supposons qu'il existe un projet de développement traditionnel, comment le transformer d'une manière technique.
Contenu de la structure
Créez trois fichiers index.html, index.js, tool.js, la structure globale du projet est:
|-yourproject/
|---index.html
|---index.js
|---tool.js
Copiez les documents suivants:
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
</div>
<!-- 引入两个js文件 -->
<script src="./tool.js"></script>
<script src="./index.js"></script>
</body>
</html>
tool.js
// 封装一个工具函数
// 把给指定id的元素设置内容
const updateDom = (id, content) =>{
document.getElementById(id).innerHTML = content
}
index.js
updateDom('app','index.html')
La description:
- Introduisez plusieurs fichiers js dans un html et faites attention à leur relation de commande.
- Le code de script se trouve au bas du corps, ce qui garantit que le nœud dom est rendu avant l'exécution du code js.
Icône
Comme la fonction de tool.js est utilisée dans index.js, index.js et tool.js sont également référencés dans index.html et la référence de tool.js est placée avant la référence de index.js. Le diagramme schématique suivant de l'ensemble du code:
sommaire
Le code ci-dessus présente les problèmes suivants:
- Il existe une relation de référence séquentielle entre les fichiers js: étant donné que tool.js est référencé dans index.js, tool.js doit être placé avant index.js.
- Il y a pollution variable : les variables définies dans un fichier peuvent être modifiées ou écrasées dans un autre fichier.
- À mesure que le nombre de fichiers .js augmente, le projet devient de moins en moins gérable.
- La technologie de modularisation (introduire un autre js dans un js) ne peut pas être utilisée pour le développement.
- Importer / Exporter
Introduction de base au webpack
Dans le projet traditionnel précédent, nous avons soulevé quelques problèmes et mentionné l'introduction d'un outil spécial: le webpack pour résoudre ce problème.
webpack est un *
静态模块打包器(module bundler)* d'une application JavaScript moderne .
Son idée principale est: tout est un module et les modules peuvent être empaquetés.
En ce qui concerne l' activité Webpack , les produits présentant une compétitivité pertinente comprennent:
Mais dans l'ensemble, dans le développement front-end, webpack a un avantage absolu: les trois frameworks front-end de vue, react et angular reposent tous sur webpack pour l'empaquetage. (L'utilisation de ces trois frameworks pour développer des projets est indissociable du webpack)
Comment introduire et utiliser webpack dans le projet
Nous avons parlé de deux points ci-dessus: 1 Les projets traditionnels ont des lacunes, 2. Webpack peut être utilisé pour résoudre ces problèmes.
Ensuite, apprenons à utiliser webpack dans le projet.
Les étapes de base
- Utilisez npm pour initialiser le projet et installer webpack.
（要先有项目，然后再用webpack来优化开发） - Modifiez la structure des répertoires pour profiter des avantages de la configuration zéro
- Modifiez légèrement le code, réécrivez le code de manière modulaire
- Utilisez webpack pour empaqueter le fichier source (js) et générer le fichier cible
- Introduisez l'objectif après l'empaquetage dans le fichier html
Initialiser le projet
S'il s'agit d'un projet existant, directementnpm init
le nœud est un environnement;
npm est un outil fourni avec node pour télécharger des packages npm
webapck est un outil basé sur l'environnement node. Il doit être exécuté dans l'environnement node. Si node n'est pas installé sur votre ordinateur, webpack ne fonctionnera pas.
Si vous n'avez pas encore créé de projet, créez un dossier vide de manière arbitraire, par exemple, nommez-le webpack-demo, entrez le dossier et utilisez la commande suivante pour générer un package.json
npm init -y
Installer le webpack dans le projet
Étant donné que différentes versions de Webpack peuvent être utilisées dans différents projets, l'installation locale (partielle) est utilisée ici. Vérifiez la différence entre l'installation locale et l'installation globale.
npm i XXXX -g # 全局安装
npm i xxxx # 本地安装 不加-g
Installer Webpack
npm i [email protected] [email protected] -D
-------------------------------------------
+ [email protected]
+ [email protected]
added 392 packages from 220 contributors in 33.984s
astuce: si vous ne spécifiez pas en plus la version du package à installer, il installera définitivement la dernière. Le 10.10.2020, webpack a atteint 5. Puisque les autres plugins n'ont pas suivi le rythme, il est relativement stable d'utiliser 4 maintenant.
- Lors de l'installation d'un package, si -D est ajouté, cela signifie que le package est une dépendance de développement, sinon, c'est une dépendance de production par défaut.
Dépendance au développement: en supposant que vous construisez une maison maintenant, vous devez utiliser une excavatrice. Cette excavatrice est une dépendance d'aménagement (une fois la maison terminée, il n'est plus nécessaire de traverser la rivière pour démolir le pont).
Dépendance de la production: Supposons que vous construisiez une maison maintenant, vous devez utiliser des fils et des conduites d'eau. Ce fil et cette conduite d'eau dépendent de la production (une fois la maison terminée, elle sera utilisée).
Si vous voyez la sortie illustrée ci-dessus, cela signifie que l'installation a réussi. Dans le même temps, vous pouvez également observer sous node_modules.
Vérifiez si l'installation a réussi
# 方式一：
node_modules\.bin\webpack -v
# 方式二：
npx webpack -v
Remarque:
-
Le nom du projet ne peut pas être pris
wepback -
Depuis webpack et non un global installé , il ne peut pas être utilisé directement
webpack -vpour faire le test. -
npx est une nouvelle fonctionnalité fournie après npm5.2. Il
node_modules/.binvérifiera si la commande y existe lors de son exécution .
Ajuster la structure du code
Cette étape est nécessaire, juste pour profiter de la sortie de la boîte de prestations (zéro webpack de configuration).
Faites une chose: mettez les trois codes de fichiers dans srcun répertoire nommé
|-package.json
|-src
|--index.html
|--index.js
|--tool.js
Après avoir ajusté la structure des répertoires, il y a un fichier nommé index.js sous src. Dans les opérations suivantes, nous pouvons profiter des avantages de la configuration zéro.
Puisque webpack prend en charge le répertoire src par défaut, le nom du répertoire ne peut être que src.
Modifier le contenu du code
Le contenu suivant utilisera les termes d'exportation et d'importation, qui sont la syntaxe modulaire d'es6 et sont utilisés conjointement.
Bien sûr, vous pouvez également utiliser module.exports et require dans nodejs pour le modéliser.
Pour écrire le code de manière modulaire , deux modifications spécifiques sont apportées:
- Exportez le module dans tool.js
- Utiliser des modules dans index.js
tool.js
Il est utilisé pour fournir une méthode pour exporter cette méthode pour d'autres modules à utiliser, le code spécifique est le suivant:
const updateDom = (id, content) =>{
document.getElementById(id).innerHTML = content
}
+ export {
+ updateDom
+ }
index.js
Introduisez les méthodes exportées dans tool.js dans index.js. Notez que cela a déjà été impliqué在一个js中引用另一个js
+ import { updateDom } from './tool'
updateDom('app','index.html')
astuce: Maintenant cela nécessite l'utilisation d'une approche modulaire dans index.js, donc il ne peut pas être utilisé directement dans le navigateur, s'il est référencé directement dans l'index.html dans
浏览器会报错.
Ensuite, nous devons utiliser les commandes webpack pour traiter index.js.
emballage Webpack
webpack4.x met en avant le slogan de l'empaquetage de configuration zéro: le code peut être empaqueté sans écrire aucun fichier de configuration. Bien sûr, il a une prémisse: il y a un fichier src / index.js dans le répertoire racine.
La commande d'emballage est:
npx webpack
# 或者是
node_modules/.bin/webpack index.js
Si vous ne rencontrez pas d'erreurs, vous verrez des résultats similaires comme suit:
Cela montre que l'opération d'empaquetage a réussi: index.js et tool.js ont déjà 合成un fichier main.js.
Deux fichiers .js sont combinés en un .js: l'avantage est qu'il réduit une requête du navigateur;
La modularisation peut être utilisée: l'avantage est qu'il est plus pratique d'écrire du code.
Le schéma est le suivant:
Introduire des js packagés
Importez le package main.js ci-dessus dans index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
</div>
<!-- 引入打包后的.js文件 -->
<script src="../dist/main.js"></script>
</body>
</html>
D'accord, vous pouvez maintenant voir que ce code peut fonctionner normalement.
Voici un exemple de diagramme.
sommaire
- webpack peut nous aider à améliorer la méthode de développement front-end;
- Il est basé sur nodejs. Avant de l'utiliser, vous devez initialiser le projet et installer webpack localement (différents projets peuvent utiliser des versions différentes).
- Il prend en charge l'empaquetage de configuration zéro: l'entrée d'empaquetage par défaut est src / index.js
- Il prend en charge l'écriture modulaire: il existe une relation de référence mutuelle ( importation, exportation ) entre les fichiers js .
- Il peut regrouper plusieurs js avec une relation de référence dans un seul fichier et le mettre dans dist / main.js par défaut .
- La commande d'emballage est:
npx webpack
S'il y a des lacunes, veuillez aviser, pour
continuer, continuez à mettre à jour!
Progressez ensemble!