Lors de l'écriture du code, le fichier js sous src est introduit. Après le packaging du webpack, un fichier d'entrée est formé à ce moment-là, le nom et le chemin du fichier js en html sont incorrects, donc webpack. doit être empaqueté et le fichier html doit être empaqueté. Le chemin d'accès au fichier js importé a été remplacé.
Les avantages de l'utilisation de Webpack pour empaqueter du HTML sont :
(1) Le fichier js empaqueté peut être automatiquement introduit dans le HTML
(2) Une fois le code HTML empaqueté, il sera toujours généré dans le dossier de construction et assemblé avec le fichier js empaqueté, de sorte que lorsque nous allons en ligne, il vous suffit de copier les dossiers générés par l'empaquetage dans l'environnement en ligne
(3) Cela nous aidera à compresser les fichiers HTML.
1. Installez le plug-in
Webpack de manière native
.ne peut comprendre que les fichiers JS et JSON, et il doit prendre en charge le packaging d'autres fichiers. Tous les types de fichiers doivent installer le plug-in ou le chargeur correspondant.
Si nous devons packager des fichiers HTML, nous devons d'abord installer html-webpack-plugin :
npm install html-webpack-plugin -D
Le rôle de ce plug-in :
Créer un fichier html sous l'export par défaut, puis importez toutes les ressources JS/CSS.
Vous pouvez également spécifier vous-même un fichier html et ajouter des ressources à ce fichier html.
2. Configuration Webpack.config.js
Après avoir installé html-webpack-plugin , vous devez le faire. configurez-le dans le fichier webpack.config.js :
// ...
// 1. Présentez le plug-in const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//...
// 2. Configurez le plug-in plugins dans plugins : [
nouveau HtmlWebpackPlugin({
template: 'index.html', // Spécifie le fichier modèle d'entrée (par rapport au répertoire racine du projet)
filename : 'index.html', // Spécifie le nom et l'emplacement du fichier de sortie (par rapport au répertoire de sortie)
// Pour les autres éléments de configuration du plug-in, vous pouvez consulter la documentation officielle du plug-in})
]
} Lien de configuration détaillé : https://www.npmjs.com/package/html-webpack-plugin
Assurez-vous que le chemin et le nom du fichier du modèle d'entrée sont cohérents avec la configuration, puis vous pourrez compiler.
3. Lors de la configuration de plusieurs entrées JS et de plusieurs situations HTML
, plusieurs fichiers HTML doivent être compilés chunk les fichiers doivent importer différents fichiers JS. Cependant, par défaut, le fichier HTML emballé importera tous les fichiers JS emballés. spécifié pour distribuer JS.
const chemin = require('chemin');
// 1. Présentez le plug-in const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//...
// 2. Configurer l'entrée JS (entrées multiples)
entrée : {
fournisseur : ['./src/jquery.min.js', './src/js/common.js'],
index : './src/index.js',
panier : './src/js/cart.js'
},
//Configurer la sortie d'exportation : {
nom de fichier : '[nom].js',
chemin : chemin.resolve(__dirname, 'build/js')
},
// 3. Configurez les plug-ins : [
nouveau HtmlWebpackPugin({
modèle : 'index.html',
nom du fichier : 'index.html',
// Utilisez chunk pour spécifier les fichiers JS à importer : ['index', 'vendor']
}),
// Combien de HTML doivent être compilés, combien de nouveaux plug-ins sont nécessaires new HtmlWebpackPlugin({
modèle : './src/cart.html',
nom du fichier : 'cart.html',
morceau : ['panier', 'vendeur']
})
]
} Astuce : Ce qu'il faut noter ici, c'est le nombre de fichiers HTML que vous devez compiler et le nombre de fois dont vous avez besoin pour créer un nouveau
HtmlWebpackPlugin.
Une fois la configuration ci-dessus compilée avec succès, le résultat est le suivant :
build
|__ index.html #Introduire index.js et supplier.js
|__ cart.html #Présentez cart.js et supplier.js
|__js
|__ supplier.js # Généré par jquery.min.js et common.js |__ index.js # Généré par index.js |__ cart.js # Généré par cart.js pour 1, webpack. config.js configuration
const HTMLWebpackPlugin = require('html-webpack-plugin')
...
plugins : [
// Configuration du packaging html html-webpack-plugin Ce plug-in générera un fichier HTML5 pour vous new HTMLWebpackPlugin({
template : "./index.html", // Chemin relatif ou absolu empaqueté vers le modèle (cible d'empaquetage)
title : 'Home', // Titre utilisé pour le document HTML généré hash : true, //true ajoute le hachage de compilation unique du webpack à tous les scripts et fichiers CSS inclus. Principalement utilisé pour vider le cache,
minify : { // Compresser le HTML
effondrementWhitespace : true, // Réduire l'espace blanc keepClosingSlash : true, // Conserver les espaces fermés RemoveComments : true, // Supprimer les commentaires RemoveRedundantAttributes : true, // Supprimer les attributs redondants RemoveScriptTypeAttributes : true, // Supprimer les attributs de type de script de script RemoveStyleLinkTypeAttributes : true, // Supprimez l'attribut de type de lien de style useShortDoctype : true, // Utilisez le type de document court préservationLineBreaks : true, // Préservez les sauts de ligne minifyCSS : true, // Compressez le CSS dans le texte
minifyJS : true, // Compresser js dans le texte
}
}),
],
... 2. A ce moment notre index.html
<!DOCTYPE html>
<html lang="">
<tête>
<méta charset="utf-8">
<méta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpackDémo</title>
</tête>
<corps>
<div id="application">
configuration du packaging HTML</div>
</corps>
</html> 3. À ce moment, notre index.js
importe './../css/index.less'
fonction ajouter(x,y) {
retourner x+y
}
console.log(add(2,3)); 3. Tapez le package dans le webpack de la console et constatez que le fichier de sortie du package a un index.html supplémentaire, le contenu est le suivant
<!DOCTYPE html>
<html lang="">
<tête>
<méta charset="utf-8">
<méta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpackDémo</title>
<script defer src="index.js"></script></head>
<corps>
<div id="app">
configuration du packaging HTML</div>
</corps>
</html> <script defer="" src="index.js"></script> est automatiquement introduit dans
le navigateur pour ouvrir la sortie packagée index.html. On constate que le style a un effet, et le contrôle. l'unité produit également normalement :
