webpack打包压缩代码,如何打包html文件为压缩包
webpack中html资源如何压缩打包？下面这篇文章就给大家简单介绍一下压缩打包html资源的webpack方法，希望对你有所帮助！
为什么需要打包html资源
写代码时，引入src下的js文件。被webpack打包后，就形成了一个入口文件。此时html中js文件的名称和路径都是错误的，需要用webpack打包，替换html中引入的js文件的路径。
用webpack打包html的好处有：
(1)打包的js文件可以自动导入html。
(2)2)html打包后，仍然会在build文件夹中生成，并与打包的js文件放在一起，所以我们上线时，只需要将打包的文件夹复制到上线环境中即可。
(3)它会帮助我们压缩html文件。
webpack中怎么压缩打包html资源
1、安装插件
Webpack只能本机理解JS和JSON文件。为了支持打包其他类型的文件，您需要安装相应的插件或加载程序。
如果我们需要打包HTML文件，我们首先需要安装html-webpack-plugin插件：
m安装html-web pack-plugin-d这个插件的功能：
在默认出口下创建一个html文件，然后导入所有JS/CSS资源。
我们也可以自己指定一个html文件，给这个html文件添加资源。
2、webpack.config.js配置
安装html-webpack-plugin插件后，您需要在webpack.config.js文件中配置它：
//.
//1.插件简介
const HtmlWebpackPlugin=require( html-web pack-plugin )；
模块.导出={
//.
//2.在插件中配置插件
插件：[
新建HtmlWebpackPlugin({
Template: index.html ，//指定门户模板文件(相对于项目根目录)
Filename: index.html ，//指定输出文件名和位置(相对于输出目录)
//插件的其他项目配置，可以查看官方插件文档。
})
]
}确保门户模板文件的路径和文件名与配置一致，然后才能编译。
3、多JS入口和多HTML情况的配置
当需要编译多个HTML文件，并且需要将不同的JS文件导入到文件中时，默认情况下，会将所有打包的JS文件导入到打包的HTML文件中。我们可以指定块来分配JS。
const path=require( path )；
//1.插件简介
const HtmlWebpackPlugin=require( html-web pack-plugin )；
模块.导出={
//.
//2.配置JS门户(多门户)
条目：{
供应商：[。/src/jquery.min.js ，。/src/js/common.js]，
索引：。/src/index.js ，
购物车：。/src/js/cart.js
},
//配置出口
输出：{
文件名：[名称]。js ，
path: path.resolve(__dirname， build/js )
},
//3.配置插件
插件：[
新的HtmlWebpackPugin插件({
模板：“index.html”，
文件名：“index.html”，
//指定通过chunk引入哪些JS文件
块：[索引，供应商]
}),
//需要编译多少HTML，就需要新插件几次。
新建HtmlWebpackPlugin({
模板：。/src/cart.html ，
文件名： cart.html ，
块：[购物车，供应商]
})
]
}上述配置编译成功后，输出如下所示：
建设
_ _ 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-web pack-plugin )
.
插件：[
//html-webpack-plugin html包配置这个插件会为你生成一个HTML5文件。
新建HTMLWebpackPlugin({
模板：。/index.html ，//模板(打包目标)的相对或绝对路径
标题：主页，//生成的HTML文档的标题
Hash: true，//true会将唯一的webpack编译哈希值追加到所有包含的脚本和CSS文件中。主要用于清除缓存、
mini:{//压缩html
CollapseWhitespace: true，//折叠空白区域。
closing lash:true，//保持关闭间隙。
RemoveComments: true，//删除注释
removeRedundantAttributes: true，//删除冗余属性
removeScriptTypeAttributes:true，//删除脚本脚本类型属性
removeStyleLinkTypeAttributes:true，//删除样式链接类型属性
useShortDoctype: true，//使用短文档类型
preserveLineBreaks: true，//保留换行符
minifyCSS: true，//压缩文内钢性铸铁
minifyJS: true，//压缩文内射流研究…
}
}),
],
.2、此时我们的index.html
！声明文档类型
html lang=
头
meta charset=utf-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
titlewebpackDemo/title
/头
身体
div id=应用程序
超文本标记语言打包配置
/div
/body
/html3，此时我们的索引。射流研究…
"导入"。/./css/index.less
函数添加(x，y) {
返回x y
}
console.log(add(2，3))；3、控制台工具键入打包，发现打包输出文件多了个index.html，内容如下
！声明文档类型
html lang=
头
meta charset=utf-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
titlewebpackDemo/title
脚本延迟src=index.js/script/head
身体
div id=应用程序
超文本标记语言打包配置
/div
/body
/html script defer= src= index。js /脚本是自动引入的
浏览器打开打包输出的index.html，发现样式起了效果，控制太也正常输出：
更多编程相关知识，请访问：编程视频！以上就是聊聊工具中怎么压缩打包超文本标记语言资源的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。