Mari kita bincangkan tentang cara memampatkan dan membungkus sumber html dalam webpack

Bagaimana untuk memampatkan dan membungkus sumber html dalam webpack? Artikel berikut akan memberi anda pengenalan ringkas kepada kaedah memampatkan dan membungkus sumber HTML dengan webpack saya harap ia akan membantu anda!

Mengapa anda perlu membungkus sumber html?

Apabila menulis kod, fail js di bawah src diperkenalkan selepas pembungkusan dengan webpack, ia terbentuk Fail entri dibuat Pada masa ini, nama dan laluan fail js dalam html adalah tidak betul, jadi pembungkusan webpack diperlukan untuk menggantikan laluan fail js yang diperkenalkan dalam html.

Faedah menggunakan webpack untuk pakej html ialah:

(1) Fail js yang dibungkus boleh dimasukkan secara automatik ke dalam html

(2) Pembungkusan HTML Ia masih akan dijana dalam folder binaan dan disatukan dengan fail js yang dibungkus Dengan cara ini, apabila pergi dalam talian, kita hanya perlu menyalin folder yang dibungkus dan dijana ke persekitaran dalam talian (. 3) Ya Bantu kami memampatkan fail html

Cara untuk memampatkan dan membungkus sumber html dalam webpack

1 >Pek web hanya boleh memahami fail JS dan JSON secara asli Untuk menyokong pembungkusan jenis fail lain, anda perlu memasang pemalam atau pemuat yang sepadan.

Jika kita perlu membungkus fail HTML, kita perlu memasang pemalam

dahulu:

html-webpack-pluginFungsi pemalam ini:

npm install html-webpack-plugin -D

Lalai semasa eksport Cipta fail html di bawah, dan kemudian import semua sumber JS/CSS

• Kami juga boleh menentukan sendiri fail html dan menambah sumber pada fail html ini

2. Konfigurasi Webpack.config.js

Selepas memasang pemalam , anda perlu untuk mengkonfigurasinya dalam fail

:

html-webpack-pluginwebpack.config.js

Pautan konfigurasi terperinci: https://www.npmjs.com/package/html-webpack-plugin

 // ...
 // 1. 引入插件
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   // ...
   // 2. 在plugins中配置插件
   plugins: [
     new HtmlWebpackPlugin({
       template: 'index.html', // 指定入口模板文件（相对于项目根目录）
       filename: 'index.html', // 指定输出文件名和位置（相对于输出目录）
       // 关于插件的其他项配置，可以查看插件官方文档
     })
   ]
 }

Pastikan laluan dan nama fail fail templat kemasukan adalah konsisten dengan Konfigurasi adalah konsisten dan ia boleh disusun.

3 Konfigurasi berbilang entri JS dan berbilang situasi HTML

Apabila berhadapan dengan keperluan untuk menyusun berbilang fail HTML, dan fail tersebut perlu untuk memperkenalkan fail JS yang berbeza, tetapi secara lalai, fail HTML yang dibungkus akan mengimport semua fail JS yang dibungkus, kami boleh menentukan untuk memperuntukkan JS.

chunk

Petua: Apa yang perlu diberi perhatian di sini ialah berapa banyak fail HTML yang perlu anda susun, berapa kali anda perlu memperbaharui

 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']
     })
   ]
 }

.

HtmlWebpackPluginSelepas konfigurasi di atas berjaya disusun, output adalah seperti berikut:

Contoh sumber html yang dimampatkan dan dibungkus

 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生成

1. konfigurasi webpack.config.js

2. Pada masa ini index.html kami

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
      }
    }),
  ],
...

3 >

3 Taip pakej dalam pek web konsol dan dapatkan fail output pakej mempunyai index.html tambahan, kandungannya adalah seperti berikut

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

import './../css/index.less'

function add(x,y) {
 return x+y
}
console.log(add(2,3));

diperkenalkan secara automatik

Penyemak imbas membuka pakej keluaran index.html, didapati bahawa gaya mempunyai kesan, dan modul kawalan juga keluar secara normal:

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

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara memampatkan dan membungkus sumber html dalam webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!