聊聊webpack中怎么压缩打包html资源-js教程-PHP中文网

首页

web前端

js教程

聊聊webpack中怎么压缩打包html资源

青灯夜游

Aug 09, 2022 pm 07:44 PM

webpack

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

详细配置链接： https://www.npmjs.com/package/html-webpack-plugin

确保入口模板文件的路径和文件名与配置一致，然后可以编译。

3、多JS入口和多HTML情况的配置

面对需要编译出多个HTML文件，且文件需要引入不同的JS文件，但默认情况下，打包后的HTML文件会引入所有打包后的JS文件，我们可以指定chunk来分配JS。

 const path = require(&#39;path&#39;);
 // 1. 引入插件
 const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
 module.exports = {
   // ...
   // 2. 配置JS入口(多入口)
   entry: {
     vendor: [&#39;./src/jquery.min.js&#39;, &#39;./src/js/common.js&#39;],
     index: &#39;./src/index.js&#39;,
     cart: &#39;./src/js/cart.js&#39;
   },
   // 配置出口
   output: {
     filename: &#39;[name].js&#39;,
     path: path.resolve(__dirname, &#39;build/js&#39;)
   },
   // 3. 配置插件
   plugins: [
     new HtmlWebpackPugin({
       template: &#39;index.html&#39;,
       filename: &#39;index.html&#39;,
       // 通过chunk来指定引入哪些JS文件
       chunk: [&#39;index&#39;, &#39;vendor&#39;]
     }),
     // 需要编译多少个HTML，就需要new几次插件
     new HtmlWebpackPlugin({
       template: &#39;./src/cart.html&#39;,
       filename: &#39;cart.html&#39;,
       chunk: [&#39;cart&#39;, &#39;vendor&#39;]
     })
   ]
 }

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(&#39;html-webpack-plugin&#39;)
...
 plugins: [
    // html-webpack-plugin  html 打包配置 该插件将为你生成一个 HTML5 文件
    new HTMLWebpackPlugin({
      template: "./index.html", // 打包到模板的相对或绝对路径 （打包目标）
      title: &#39;首页&#39;, // 用于生成的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 &#39;./../css/index.less&#39;

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>

fa47545964b5492a54172b73a22d827b2cacc6d41bbb37262a98f745aa00fbf0是自动引入的

浏览器打开打包输出的 index.html，发现样式起了效果，控制太也正常输出：

更多编程相关知识，请访问：编程视频！！

以上是聊聊webpack中怎么压缩打包html资源的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：掘金社区。如有侵权，请联系admin@php.cn删除

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。