文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

webpack中如何压缩打包html资源

2024-04-02 19:55

关注

本篇内容主要讲解“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

这个插件的作用:

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', // 指定输出文件名和位置(相对于输出目录)
       // 关于插件的其他项配置,可以查看插件官方文档
     })
   ]
 }

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

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资源

webpack中如何压缩打包html资源

到此,相信大家对“webpack中如何压缩打包html资源”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯