聊聊webpack中怎么压缩打包html资源
webpack中怎么压缩打包html资源？下面本篇文章就来给大家简单介绍一下webpack压缩打包html资源的方法，希望对大家有所帮助！
为什么需要打包html资源
写代码时引入的是src下面的js文件，经过webpack打包后，形成了一个入口文件，此时html中js文件的名称和路径就不对了，所以需要webpack打包，把html中引入js文件的路径替换了。
用webpack打包html的好处有：
（1）可以自动将打包后的js文件引入html
（2）html打包后依然会生成在build文件夹下和打包后的js文件放在一起，这样上线的时候我们只需要将打包生成的文件夹一起拷贝到上线环境就可以了
（3）会帮我们压缩html文件
webpack中怎么压缩打包html资源
1、安装插件
webpack原生只能理解JS和JSON文件，要支持打包其他类型的文件，都需要安装相应的插件或loader。
如果我们需要打包HTML文件，首先需要安装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>是自动引入的
浏览器打开打包输出的 index.html，发现样式起了效果，控制太也正常输出：
更多编程相关知识，请访问：编程视频！！
以上是聊聊webpack中怎么压缩打包html资源的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
VUE3入门教程：使用Webpack进行打包和构建
Jun 15, 2023 pm 06:17 PM
Vue是一款优秀的JavaScript框架，它可以帮助我们快速构建交互性强、高效性好的Web应用程序。Vue3是Vue的最新版本，它引入了很多新的特性和功能。Webpack是目前最流行的JavaScript模块打包器和构建工具之一，它可以帮助我们管理项目中的各种资源。本文就为大家介绍如何使用Webpack打包和构建Vue3应用程序。1.安装Webpack
vite和webpack的区别是什么
Jan 11, 2023 pm 02:55 PM
区别：1、webpack服务器启动速度比vite慢；由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。2、vite热更新比webpack快；vite在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖，而webpack基于node。4、vite的生态不及webpack，加载器、插件不够丰富。
如何使用PHP和webpack进行模块化开发
May 11, 2023 pm 03:52 PM
随着Web开发技术的不断发展，前后端分离、模块化开发已经成为了一个广泛的趋势。PHP作为一种常用的后端语言，在进行模块化开发时，我们需要借助一些工具来实现模块的管理和打包，其中webpack是一个非常好用的模块化打包工具。本文将介绍如何使用PHP和webpack进行模块化开发。一、什么是模块化开发模块化开发是指将程序分解成不同的独立模块，每个模块都有自己的作
webpack怎么将es6转成es5的模块
Oct 18, 2022 pm 03:48 PM
配置方法：1、用导入的方法把ES6代码放到打包的js代码文件中；2、利用npm工具安装babel-loader工具，语法“npm install -D babel-loader @babel/core @babel/preset-env”；3、创建babel工具的配置文件“.babelrc”并设定转码规则；4、在webpack.config.js文件中配置打包规则即可。
使用Spring Boot和Webpack构建前端工程和插件系统
Jun 22, 2023 am 09:13 AM
随着现代Web应用程序的复杂性不断增加，构建优秀的前端工程和插件系统变得越来越重要。随着SpringBoot和Webpack的流行，它们成为了一个构建前端工程和插件系统的完美组合。SpringBoot是一个Java框架，它以最小的配置要求来创建Java应用程序。它提供了很多有用的功能，比如自动配置，使开发人员可以更快、更容易地搭建和部署Web应用程序。W
vue webpack可打包哪些文件
Dec 20, 2022 pm 07:44 PM
在vue中，webpack可以将js、css、图片、json等文件打包为合适的格式，以供浏览器使用；在webpack中js、css、图片、json等文件类型都可以被当做模块来使用。webpack中各种模块资源可打包合并成一个或多个包，并且在打包的过程中，可以对资源进行处理，如压缩图片、将scss转成css、将ES6语法转成ES5等可以被html识别的文件类型。
Webpack是什么？详解它是如何工作的？
Oct 13, 2022 pm 07:36 PM
Webpack是一款模块打包工具。它为不同的依赖创建模块，将其整体打包成可管理的输出文件。这一点对于单页面应用（如今Web应用的事实标准）来说特别有用。
深析webpack的打包流程和原理
Aug 09, 2022 pm 05:11 PM
Webpack 是如何实现打包的？下面本篇文章就来带大家深入了解一下Webpack 打包原理，希望对大家有所帮助！
