interface Web
js tutoriel
Comment utiliser le plug-in Installation dans des projets pratiques
Comment utiliser le plug-in Installation dans des projets pratiques
Cette fois, je vais vous montrer comment utiliser le plug-in d'installation dans des projets réels, et quelles sont les précautions à prendre pour utiliser le plug-in d'installation dans des projets réels. Ce qui suit est un cas pratique, jetons un coup d'œil.
Ce plugin est utilisé pour simplifier la création de fichiers HTML qui servent des bundles webpack, notamment lorsque le nom du fichier contient une valeur de hachage, et cette valeur change à chaque fois qu'il est compilé. Vous pouvez soit laisser ce plugin vous aider à générer automatiquement des fichiers HTML, utiliser des modèles lodash pour charger les bundles générés, soit charger les bundles vous-même.
Comment utiliser le plug-in d'installation dans des projets réels
Utilisez npm pour installer ce plug-in
$ npm install html-webpack-plugin@2 --save-dev
Basique Utilisation
Ce plugin peut aider à générer des fichiers HTML. Dans l'élément body, utilisez un script pour inclure tous vos bundles webpack. Configurez-le simplement comme suit dans votre fichier de configuration webpack :
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <script src="index_bundle.js"></script> </body> </html>
Configuration
peut effectuer une série de configurations et prend en charge les informations de configuration suivantes- titre : utilisé pour générer le titre des pages élément
- filename : nom du fichier HTML de sortie, la valeur par défaut est index.html, il peut également être directement configuré avec des sous-répertoires.
- modèle : chemin du fichier modèle, prend en charge le chargeur, tel que html!./index.html
- inject : true 'head' | 'body' | false , injecte toutes les ressources dans un modèle ou templateContent spécifique. Si défini sur true ou body, toutes les ressources javascript seront placées au bas de l'élément body et 'head' sera placé dans l'élément head.
- favicon : ajoutez un chemin de favicon spécifique au fichier HTML de sortie.
- minify : {} | false, passez l'option html-minifier pour minifier la sortie
- hash : true false, si vrai, ajoute un hachage de construction Webpack unique pour tous les scripts et fichiers CSS inclus, utile pour la mise en cache.
- cache : true | false, si vrai, c'est la valeur par défaut et le fichier ne sera publié qu'après modification du fichier.
- showErrors : true | false, si vrai, c'est la valeur par défaut et le message d'erreur sera écrit sur la page HTML
- morceaux : Autoriser l'ajout de certains morceaux uniquement (par exemple, uniquement les morceaux de test unitaire)
- chunksSortMode : Permet de contrôler la façon dont les morceaux sont triés avant d'être ajoutés à la page. Valeurs prises en charge : 'aucun' | 'default ' | {function}-default:'auto'
- excludeChunks : permet de sauter certains morceaux (par exemple, sauter des blocs de test unitaire)
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js',
hash: true
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html'
})
]
}Générer plusieurs fichiers HTML
Générer plusieurs fichiers HTML en ajoutant ce plug-in plusieurs fois dans le fichier de configuration.{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(), // Generates default index.html
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
}Écrire un modèle personnalisé
Si le fichier HTML généré par défaut ne répond pas à vos besoins, vous pouvez créer votre propre modèle personnalisé. Un moyen pratique consiste à transmettre l'option d'injection, puis à la transmettre à un fichier HTML personnalisé. html-webpack-plugin injectera automatiquement tous les fichiers CSS, js, manifeste et favicon requis dans le balisage.plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: 'my-index.html', // Load a custom template
inject: 'body' // Inject all scripts into the body
})
]<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> </body> </html>
module: {
loaders: [
{ test: /\.hbs$/, loader: "handlebars" }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
template: 'my-index.hbs',
inject: 'body'
})
]plugins: [
new HtmlWebpackPlugin({
inject: true,
templateContent: templateContentString
})
]plugins: [
new HtmlWebpackPlugin({
templateContent: function(templateParams, compilation) {
// Return your template content synchronously here
return '..';
}
})
]plugins: [
new HtmlWebpackPlugin({
templateContent: function(templateParams, compilation, callback) {
// Return your template content asynchronously here
callback(null, '..');
}
})
]变量 o 在模板中是在渲染时传递进来的数据，这个变量有如下的属性：
1、htmlWebpackPlugin: 这个插件的相关数据 ◦
htmlWebpackPlugin.files: 资源的块名，来自 webpack 的 stats 对象，包含来自 entry 的从 entry point name 到 bundle 文件名映射。
"htmlWebpackPlugin": {
"files": {
"css": [ "main.css" ],
"js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
"chunks": {
"head": {
"entry": "assets/head_bundle.js",
"css": [ "main.css" ]
},
"main": {
"entry": "assets/main_bundle.js",
"css": []
},
}
}
}如果在 webpack 配置文件中，你配置了 publicPath，将会反射正确的资源
htmlWebpackPlugin.options: 传递给插件的配置。
2、webpack: webpack 的 stats 对象。
3、webpackConfig: webpack 配置信息。
过滤块
可以使用 chunks 来限定特定的块。
plugins: [
new HtmlWebpackPlugin({
chunks: ['app']
})
]还可以使用 excludeChunks 来排除特定块。
plugins: [
new HtmlWebpackPlugin({
excludeChunks: ['dev-helper']
})
]事件
通过事件允许其它插件来扩展 HTML。
html-webpack-plugin-before-html-processing
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit
使用方式：
compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
htmlPluginData.html += 'The magic footer';
callback();
});相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Tutoriel de démarrage VUE3 : empaquetage et création avec Webpack
Jun 15, 2023 pm 06:17 PM
Vue est un excellent framework JavaScript qui peut nous aider à créer rapidement des applications Web interactives et efficaces. Vue3 est la dernière version de Vue, qui introduit de nombreuses nouvelles fonctionnalités et fonctionnalités. Webpack est actuellement l'un des packagers de modules et outils de construction JavaScript les plus populaires, qui peut nous aider à gérer diverses ressources dans nos projets. Cet article explique comment utiliser Webpack pour empaqueter et créer des applications Vue3. 1. Installez Webpack
Quelle est la différence entre vite et webpack
Jan 11, 2023 pm 02:55 PM
Différences : 1. La vitesse de démarrage du serveur webpack est plus lente que celle de Vite ; car Vite n'a pas besoin d'être empaqueté au démarrage, il n'est pas nécessaire d'analyser les dépendances du module et de compiler, donc la vitesse de démarrage est très rapide. 2. La mise à jour à chaud de Vite est plus rapide que le webpack ; en termes de HRM de Vite, lorsque le contenu d'un certain module change, laissez simplement le navigateur demander à nouveau le module. 3. Vite utilise esbuild pour pré-construire les dépendances, tandis que webpack est basé sur le nœud. 4. L'écologie de Vite n'est pas aussi bonne que celle du webpack, et les chargeurs et plug-ins ne sont pas assez riches.
Comment utiliser PHP et Webpack pour le développement modulaire
May 11, 2023 pm 03:52 PM
Avec le développement continu de la technologie de développement Web, la séparation front-end et back-end et le développement modulaire sont devenus une tendance répandue. PHP est un langage back-end couramment utilisé. Lors du développement modulaire, nous devons utiliser certains outils pour gérer et empaqueter les modules. Webpack est un outil d'empaquetage modulaire très facile à utiliser. Cet article explique comment utiliser PHP et Webpack pour le développement modulaire. 1. Qu'est-ce que le développement modulaire ? Le développement modulaire fait référence à la décomposition d'un programme en différents modules indépendants. Chaque module a sa propre fonction.
Comment Webpack convertit-il le module es6 en es5 ?
Oct 18, 2022 pm 03:48 PM
Méthode de configuration : 1. Utilisez la méthode d'importation pour placer le code ES6 dans le fichier de code js emballé ; 2. Utilisez l'outil npm pour installer l'outil babel-loader, la syntaxe est "npm install -D babel-loader @babel/core @babel/preset- env"; 3. Créez le fichier de configuration ".babelrc" de l'outil babel et définissez les règles de transcodage ; 4. Configurez les règles de packaging dans le fichier webpack.config.js.
Utilisez Spring Boot et Webpack pour créer des projets frontaux et des systèmes de plug-ins
Jun 22, 2023 am 09:13 AM
Alors que la complexité des applications Web modernes continue d’augmenter, la création d’excellents systèmes d’ingénierie frontale et de plug-ins devient de plus en plus importante. Avec la popularité de Spring Boot et Webpack, ils sont devenus une combinaison parfaite pour créer des projets frontaux et des systèmes de plug-ins. SpringBoot est un framework Java qui crée des applications Java avec des exigences de configuration minimales. Il fournit de nombreuses fonctionnalités utiles, telles que la configuration automatique, afin que les développeurs puissent créer et déployer des applications Web plus rapidement et plus facilement. W
Qu'est-ce que Webpack ? Explication détaillée de son fonctionnement ?
Oct 13, 2022 pm 07:36 PM
Webpack est un outil de packaging de modules. Il crée des modules pour différentes dépendances et les regroupe tous dans des fichiers de sortie gérables. Ceci est particulièrement utile pour les applications d'une seule page (le standard de facto pour les applications Web aujourd'hui).
Quels fichiers le package Vue Webpack peut-il contenir ?
Dec 20, 2022 pm 07:44 PM
En vue, webpack peut regrouper des fichiers js, css, images, json et autres dans des formats appropriés pour une utilisation par le navigateur. Dans webpack, js, css, images, json et d'autres types de fichiers peuvent être utilisés comme modules. Diverses ressources de module dans webpack peuvent être regroupées et fusionnées en un ou plusieurs packages, et pendant le processus de packaging, les ressources peuvent être traitées, comme la compression d'images, la conversion de scss en css, la conversion de la syntaxe ES6 en ES5, etc., qui peuvent être reconnu par le type de fichier HTML.
Comment installer Webpack dans vue
Jul 25, 2022 pm 03:27 PM
Webpack dans vue est installé à l'aide du gestionnaire de packages de nœuds "npm" ou de l'image npm "cnpm". Webpack est un outil d'empaquetage de modules statiques pour les applications JavaScript modernes. Il est développé sur la base de node.js. Il nécessite la prise en charge du composant node.js lors de son utilisation. Il doit être installé à l'aide de npm ou cnpm. g" ou "cnpm install webpack -g".
