


Parlons de la façon de compresser et de conditionner les ressources HTML dans Webpack
Comment compresser et empaqueter des ressources HTML dans webpack ? L'article suivant vous donnera une brève introduction à la méthode de compression et de packaging des ressources HTML avec webpack. J'espère qu'il vous sera utile !
Pourquoi devez-vous empaqueter les ressources HTML
Lors de l'écriture du code, le fichier js sous src est introduit. Après avoir été empaqueté par webpack, un fichier d'entrée est formé à ce moment-là. le fichier js en HTML est incorrect, un emballage Webpack est donc nécessaire pour remplacer le chemin d'accès au fichier js en HTML.
Les avantages de l'utilisation de webpack pour empaqueter du HTML sont :
(1) Le fichier js empaqueté peut être automatiquement introduit dans html
(2) Une fois le HTML empaqueté, il sera toujours généré dans le dossier de construction et le fichier js empaqueté sera placé Ensemble, il nous suffit de copier les dossiers empaquetés et générés dans l'environnement en ligne lorsque nous allons en ligne
(3) nous aidera à compresser les fichiers html
Comment compresser et empaqueter les ressources html dans webpack
1. Installer des plug-ins
webpack ne peut comprendre que les fichiers JS et JSON de manière native. Pour prendre en charge le packaging d'autres types de fichiers, vous devez installer les plug-ins ou chargeurs correspondants.
Si nous devons empaqueter des fichiers HTML, nous devons d'abord installer le plug-in html-webpack-plugin
: html-webpack-plugin
插件:
npm install html-webpack-plugin -D
这个插件的作用:
默认在出口下创建一个html文件,然后导入所有的JS/CSS资源
我们也可以自己指定一个html文件,在此html文件中加入资源
2、webpack.config.js配置
安装好html-webpack-plugin
插件后,需要在webpack.config.js
文件中进行配置:
// ... // 1. 引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... // 2. 在plugins中配置插件 plugins: [ new HtmlWebpackPlugin({ template: 'index.html', // 指定入口模板文件(相对于项目根目录) filename: 'index.html', // 指定输出文件名和位置(相对于输出目录) // 关于插件的其他项配置,可以查看插件官方文档 }) ] }
详细配置链接: https://www.npmjs.com/package/html-webpack-plugin
确保入口模板文件的路径和文件名与配置一致,然后可以编译。
3、多JS入口和多HTML情况的配置
面对需要编译出多个HTML文件,且文件需要引入不同的JS文件,但默认情况下,打包后的HTML文件会引入所有打包后的JS文件,我们可以指定chunk
来分配JS。
const path = require('path'); // 1. 引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... // 2. 配置JS入口(多入口) entry: { vendor: ['./src/jquery.min.js', './src/js/common.js'], index: './src/index.js', cart: './src/js/cart.js' }, // 配置出口 output: { filename: '[name].js', path: path.resolve(__dirname, 'build/js') }, // 3. 配置插件 plugins: [ new HtmlWebpackPugin({ template: 'index.html', filename: 'index.html', // 通过chunk来指定引入哪些JS文件 chunk: ['index', 'vendor'] }), // 需要编译多少个HTML,就需要new几次插件 new HtmlWebpackPlugin({ template: './src/cart.html', filename: 'cart.html', chunk: ['cart', 'vendor'] }) ] }
Tip: 这里需要注意的是要编译多少个HTML文件,就要new几次
HtmlWebpackPlugin
。
上面的配置编译成功后,输出情况是这样的:
build |__ index.html # 引入index.js和vendor.js |__ cart.html # 引入cart.js和vendor.js |__ js |__ vendor.js # 由jquery.min.js和common.js生成 |__ index.js # 由index.js生成 |__ cart.js # 由cart.js生成
压缩打包html资源实例
1、webpack.config.js配置
const HTMLWebpackPlugin = require('html-webpack-plugin') ... plugins: [ // html-webpack-plugin html 打包配置 该插件将为你生成一个 HTML5 文件 new HTMLWebpackPlugin({ template: "./index.html", // 打包到模板的相对或绝对路径 (打包目标) title: '首页', // 用于生成的HTML文档的标题 hash: true,//true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。主要用于清除缓存, minify: { // 压缩html collapseWhitespace: true, // 折叠空白区域 keepClosingSlash: true, // 保持闭合间隙 removeComments: true, // 移除注释 removeRedundantAttributes: true, // 删除冗余属性 removeScriptTypeAttributes: true, // 删除Script脚本类型属性 removeStyleLinkTypeAttributes: true, // 删除样式链接类型属性 useShortDoctype: true, // 使用短文档类型 preserveLineBreaks: true, // 保留换行符 minifyCSS: true, // 压缩文内css minifyJS: true, // 压缩文内js } }), ], ...
2、此时我们的index.html
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>webpackDemo</title> </head> <body> <div id="app"> html 打包配置 </div> </body> </html>
3、此时我们的index.js
import './../css/index.less' function add(x,y) { return x+y } console.log(add(2,3));
3、控制台webpack键入打包,发现打包输出文件多了个index.html,内容如下
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>webpackDemo</title> <script defer src="index.js"></script></head> <body> <div id="app"> html 打包配置 </div> </body> </html>
<script defer src="index.js"></script>
rrreee
- Par défaut, un fichier html est créé lors de l'export, puis toutes les ressources JS/CSS sont importées
-
Nous pouvons également spécifier un fichier html nous-mêmes et ajoutons des ressources à ce fichier html
html-webpack-plugin
. , vous devez configurer webpack.config.js
Configurer dans le fichier : 🎜rrreee🎜Lien de configuration détaillé : https://www.npmjs.com/package/html-webpack-plugin🎜🎜Assurez-vous que le chemin et le nom du fichier de modèle d'entrée et la configuration sont cohérents et peuvent ensuite être compilés. 🎜🎜🎜🎜3. Configuration de plusieurs entrées JS et de plusieurs situations HTML 🎜🎜🎜🎜 Face à la nécessité de compiler plusieurs fichiers HTML, et les fichiers doivent importer différents fichiers JS, mais par défaut, les fichiers HTML packagés seront importés. Pour tous les fichiers JS packagés, nous pouvons spécifier un
chunk
pour distribuer JS. 🎜rrreee🎜Astuce : Ce qu'il faut noter ici, c'est le nombre de fichiers HTML que vous devez compiler, vous devez utiliser le nouveau HtmlWebpackPlugin
plusieurs fois. 🎜
🎜Une fois la configuration ci-dessus compilée avec succès, le résultat est le suivant : 🎜rrreee🎜Exemple de ressources HTML compressées et empaquetées🎜🎜🎜1. config.js Configurez 🎜rrreee
2. À ce moment, notre index.html🎜rrreee🎜3. À ce moment, notre index.js🎜rrreee🎜3. console webpack et recherchez le package. Le fichier de sortie a un index.html supplémentaire et le contenu est le suivant🎜rrreee🎜<script defer src="index.js"></script> est automatiquement introduit dans le navigateur🎜🎜 Ouvrez le fichier de sortie index.html et constatez que le style a un effet et que l'unité de contrôle sort normalement : 🎜🎜🎜🎜🎜🎜🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜
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)

Sujets chauds

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

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.

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.

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.

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).

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.

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

Développement Laravel : Comment optimiser la taille des fichiers à l'aide de LaravelMix et Webpack ? Laravel est un framework PHP très populaire qui fournit de nombreuses fonctionnalités et outils pour aider les développeurs à devenir plus productifs lors de la création d'applications Web. Parmi eux, LaravelMix et Webpack sont deux outils puissants qui peuvent vous aider à optimiser la taille des fichiers et à améliorer les performances. Dans cet article, nous présenterons comment utiliser LaravelMix et Webpack pour optimiser
