Heim >Web-Frontend >js-Tutorial >Lassen Sie uns darüber sprechen, wie Sie HTML-Ressourcen im Webpack komprimieren und verpacken
Wie komprimiere und verpacke ich HTML-Ressourcen im Webpack? Der folgende Artikel gibt Ihnen eine kurze Einführung in die Methode zum Komprimieren und Packen von HTML-Ressourcen mit Webpack. Ich hoffe, er ist hilfreich für Sie!
Die Vorteile der Verwendung von Webpack zum Packen von HTML sind:
(1) Die gepackte JS-Datei kann automatisch in HTML eingefügt werden
(2) Nachdem das HTML gepackt wurde, wird es weiterhin im Build-Ordner generiert und Die gepackte js-Datei wird zusammen abgelegt. Wir müssen nur die gepackten und generierten Ordner in die Online-Umgebung kopieren, wenn wir online gehen(3) hilft uns beim Komprimieren der HTML-DateienSo komprimieren und verpacken Sie HTML-Ressourcen webpack
Webpack kann nur JS- und JSON-Dateien nativ verstehen. Um das Packen anderer Dateitypen zu unterstützen, müssen Sie die entsprechenden Plug-Ins oder Loader installieren.
Wenn wir HTML-Dateien verpacken müssen, müssen wir zuerst das Plug-inhtml-webpack-plugin installieren: npm install html-webpack-plugin -DDie Funktion dieses Plug-ins:
html-webpack-plugin插件： // ...
// 1. 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
// 2. 在plugins中配置插件
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // 指定入口模板文件（相对于项目根目录）
filename: 'index.html', // 指定输出文件名和位置（相对于输出目录）
// 关于插件的其他项配置，可以查看插件官方文档
})
]
}这个插件的作用：
默认在出口下创建一个html文件，然后导入所有的JS/CSS资源
我们也可以自己指定一个html文件，在此html文件中加入资源
2、webpack.config.js配置
安装好html-webpack-plugin插件后，需要在webpack.config.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']
})
]
}详细配置链接： https://www.npmjs.com/package/html-webpack-plugin
确保入口模板文件的路径和文件名与配置一致，然后可以编译。
3、多JS入口和多HTML情况的配置
面对需要编译出多个HTML文件，且文件需要引入不同的JS文件，但默认情况下，打包后的HTML文件会引入所有打包后的JS文件，我们可以指定chunk来分配JS。
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生成Tip: 这里需要注意的是要编译多少个HTML文件，就要new几次
HtmlWebpackPlugin。
上面的配置编译成功后，输出情况是这样的：
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
}
}),
],
...1、webpack.config.js配置
<!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>2、此时我们的index.html
import './../css/index.less'
function add(x,y) {
return x+y
}
console.log(add(2,3));3、此时我们的index.js
<!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>3、控制台webpack键入打包，发现打包输出文件多了个index.html，内容如下
rrreee<script defer src="index.js"></script>Standardmäßig wird beim Export eine HTML-Datei erstellt und dann werden alle JS/CSS-Ressourcen importiert
Wir können auch eine HTML-Datei angeben uns selbst und fügen Sie dieser HTML-Datei Ressourcen hinzu
Nach der Installation des Plug-Ins html-webpack-plugin , müssen Sie webpack.config.jsKonfigurieren in der Datei: rrreeeDetaillierter Konfigurationslink: https://www.npmjs.com/package/html-webpack-plugin
chunk angeben, um JS zu verteilen. 🎜rrreee🎜Tipp: Hier ist zu beachten, wie viele HTML-Dateien Sie kompilieren müssen. Sie müssen das neue HtmlWebpackPlugin mehrmals verwenden. 🎜🎜Nachdem die obige Konfiguration erfolgreich kompiliert wurde, lautet die Ausgabe wie folgt: 🎜rrreee2. Zu diesem Zeitpunkt unser index.js🎜rrreee🎜3 Paket und finden Sie das Paket. Die Ausgabedatei verfügt über eine zusätzliche index.html und der Inhalt lautet wie folgt🎜rrreee🎜<script defer src="index.js"></script> Code> wird automatisch in den Browser eingeführt🎜🎜 Öffnen Sie die gepackte Ausgabe index.html und stellen Sie fest, dass der Stil eine Wirkung hat und die Steuereinheit normal ausgibt: 🎜🎜🎜🎜🎜🎜🎜🎜Weitere programmierbezogene Kenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜
Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie HTML-Ressourcen im Webpack komprimieren und verpacken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!