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

🎜Lien de configuration détaillé : https://www.npmjs.com/package/html-webpack-plugin🎜

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

🎜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!