Table des matières
Pourquoi devez-vous empaqueter les ressources HTML
Comment compresser et empaqueter les ressources html dans webpack
压缩打包html资源实例
🎜Exemple de ressources HTML compressées et empaquetées🎜🎜🎜1. config.js Configurez 🎜rrreee
Maison interface Web js tutoriel Parlons de la façon de compresser et de conditionner les ressources HTML dans Webpack

Parlons de la façon de compresser et de conditionner les ressources HTML dans Webpack

Aug 09, 2022 pm 07:44 PM
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 !

Parlons de la façon de compresser et de conditionner les ressources HTML dans Webpack

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
Copier après la connexion

这个插件的作用:

  • 默认在出口下创建一个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', // 指定输出文件名和位置(相对于输出目录)
       // 关于插件的其他项配置,可以查看插件官方文档
     })
   ]
 }
Copier après la connexion

详细配置链接: 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']
     })
   ]
 }
Copier après la connexion

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生成
Copier après la connexion

压缩打包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
      }
    }),
  ],
...
Copier après la connexion

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>
Copier après la connexion

3、此时我们的index.js

import &#39;./../css/index.less&#39;

function add(x,y) {
 return x+y
}
console.log(add(2,3));
Copier après la connexion

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>
Copier après la connexion

<script defer src="index.js"></script>rrreee

La fonction de ce plug-in :

  • Par défaut, un fichier html est créé lors de l'export, puis toutes les ressources JS/CSS sont importées

  • Parlons de la façon de compresser et de conditionner les ressources HTML dans WebpackNous pouvons également spécifier un fichier html nous-mêmes et ajoutons des ressources à ce fichier html

Parlons de la façon de compresser et de conditionner les ressources HTML dans Webpack

2 Configuration Webpack.config.js

Après avoir installé le plug-in html-webpack-plugin. , vous devez configurer webpack.config.jsConfigurer 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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Tutoriel de démarrage VUE3 : empaquetage et création avec Webpack 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 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 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.

Quels fichiers le package Vue Webpack peut-il contenir ? 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.

Qu'est-ce que Webpack ? Explication détaillée de son fonctionnement ? 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).

Comment Webpack convertit-il le module es6 en es5 ? 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 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

Développement Laravel : Comment optimiser la taille des fichiers à l'aide de Laravel Mix et Webpack ? Développement Laravel : Comment optimiser la taille des fichiers à l'aide de Laravel Mix et Webpack ? Jun 13, 2023 pm 04:44 PM

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

See all articles