程序员经验分享-hwhale

Webpack5 教程(3)--处理图片资源

2023-11-08

目录

处理图片资源

1. 配置

2. 添加图片资源

3. 使用图片资源

4. 运行指令

5. 输出资源情况

6. 对图片资源进行优化

修改输出资源的名称和路径

1. 配置

2. 修改 index.html

3. 运行指令

自动清空上次打包资源

1. 配置

2. 运行指令

处理字体图标资源

#1. 下载字体图标文件

#2. 添加字体图标资源

3. 配置

4. 运行指令

处理其他资源

1. 配置

2. 运行指令

处理图片资源

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

1. 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
  plugins: [],
  mode: "development",
};

2. 添加图片资源

  • src/images/1.jpeg
  • src/images/2.png
  • src/images/3.gif

3. 使用图片资源

  • src/less/index.less
.box2 {
  width: 100px;
  height: 100px;
  background-image: url("../images/1.jpeg");
  background-size: cover;
}
  • src/sass/index.sass

.box3
  width: 100px
  height: 100px
  background-image: url("../images/2.png")
  background-size: cover
  • src/styl/index.styl
.box5
  width 100px
  height 100px
  background-image url("../images/3.gif")
  background-size cover

4. 运行指令

npx webpack

打开 index.html 页面查看效果

5. 输出资源情况

此时如果查看 dist 目录的话，会发现多了三张图片资源

因为 Webpack 会将所有打包好的资源输出到 dist 目录下

  • 为什么样式资源没有呢？

因为经过 style-loader 的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来

6. 对图片资源进行优化

将小于某个大小的图片转化成 data URI 形式（Base64 格式）

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        }
      },
    ],
  },
  plugins: [],
  mode: "development",
};

  • 优点：减少请求数量
  • 缺点：体积变得更大

此时输出的图片文件就只有两张，有一张图片以 data URI 形式内置到 js 中了 （注意：需要将上次打包生成的文件清空，再重新打包才有效果）

修改输出资源的名称和路径

1. 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

2. 修改 index.html

<!DOCTYPE html>
<html lang="en">
  <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>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <!-- 修改 js 资源路径 -->
    <script src="../dist/static/js/main.js"></script>
  </body>
</html>

 

3. 运行指令

npx webpack
  • 此时输出文件目录：

（注意：需要将上次打包生成的文件清空，再重新打包才有效果）

├── dist
    └── static
         ├── imgs
         │    └── 7003350e.png
         └── js
              └── main.js

自动清空上次打包资源

1. 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 40 * 1024, // 小于40kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

2. 运行指令

npx webpack

观察 dist 目录资源情况

处理字体图标资源

#1. 下载字体图标文件

  1. 打开阿里巴巴矢量图标库open in new window

  2. 选择想要的图标添加到购物车，统一下载到本地

#2. 添加字体图标资源

  • src/fonts/iconfont.ttf

  • src/fonts/iconfont.woff

  • src/fonts/iconfont.woff2

  • src/css/iconfont.css

    • 注意字体文件路径需要修改

  • src/main.js

import { add } from "./math";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

  • public/index.html

<!DOCTYPE html>
<html lang="en">
  <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>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <!-- 使用字体图标 -->
    <i class="iconfont icon-arrow-down"></i>
    <i class="iconfont icon-ashbin"></i>
    <i class="iconfont icon-browse"></i>
    <script src="../dist/static/js/main.js"></script>
  </body>
</html>

3. 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

type: "asset/resource"和type: "asset"的区别：

  1. type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
  2. type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式

4. 运行指令

npx webpack

打开 index.html 页面查看效果

处理其他资源

开发中可能还存在一些其他资源，如音视频等，我们也一起处理了

1. 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

就是在处理字体图标资源基础上增加其他文件类型，统一处理即可

2. 运行指令

npx webpack

打开 index.html 页面查看效果

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Webpack5 教程

javascript

前端

WEBPACK

Webpack5 教程(3)--处理图片资源 的相关文章

  • 为什么 AngularJS 在使用 ng-bind-html 时会去掉 data- 属性？

    我正在使用 contentEditable div 来使用户能够格式化他们的文章 我对html内容做了一些处理并保留它 我在用ng bind html当观众想要阅读文章时呈现结果 我不想使用 sce trustAsHtml因为我仍然希望 A

  • 使用 Selenium + JavaScript 或 WebDriverJS 在浏览器中执行 JavaScript

    经过很多天的大量搜索后 我在这里寻求帮助 我们有一个使用 javascript selenium webdriverjs 的设置 我们想要在通过 selenium 打开的浏览器中传递数据 简单来说 我们希望在浏览器中执行任何类型的 Java

  • ExtJs4 Json TreeStore？

    我正在将 ExtJs3 应用程序迁移到 ExtJs4 在 ExtJs3 中 我有一个树网格 它有一个加载器来加载树数据 如下所示 loader new Ext tree TreeLoader dataUrl Department Depar

  • Android 上的 setTimeOut() 相当于什么？

    我需要等效的代码setTimeOut call function milliseconds 对于安卓 setTimeOut call function milliseconds 您可能想查看定时任务 http developer andro

  • Angular JS - 如何验证数字输入中的位数

    我们想要做的是 有一个仅接受 0 24 的输入 对于时间输入应用程序 这些是用户应该能够输入到输入中的值 0 1 2 3 4 5 6 7 8 9 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

  • 使用 Jasmine 监视 Backbone.js 路由调用

    在主干路由器上监视方法调用时遇到问题 以确保它在给定路由上调用正确的方法 测试摘录 describe Router gt beforeEach gt router new App Router Backbone history start

  • 仅返回 JavaScript 字符串中最后一个下划线之前的文本

    如果我有一个像这样的字符串 var str Arthropoda Arachnida Zodariidae Habronestes hunti 如何获取最后一个下划线之前的字符串的第一部分 在这种情况下我只想 Arthropoda Arac

  • .getDay() 奇怪的行为[重复]

    这个问题在这里已经有答案了 有一个例子 console log new Date 2013 02 24 getDay 24 gt 0 24 console log new Date 2013 02 25 getDay 25 gt 1 25

  • Internet Explorer 的数组indexOf 实现

    有很多关于如何将 indexOf 实现放入数组原型中以便它可以在 Internet Explorer 下工作的解决方案 但是我偶然发现了一个问题 到目前为止我所看到的任何地方似乎都没有解决这个问题 使用非常一致的MDC 的实施 https

  • 所有属性的 JavaScript getter

    长话短说 我现在的情况是想要一个 PHP 风格的 getter 但是是 JavaScript 的 我的 JavaScript 仅在 Firefox 中运行 因此 Mozilla 特定的 JS 对我来说没问题 我能找到的制作 JS gette

  • 不明白为什么 Chrome/Safari 无法在此处获取 ScrollHeight

    我只是问了一个问题 为什么某些 js 代码不能 100 在 Chrome 和 Safari 中工作 但经过更多故障排除后 我想我发现这是我应该发布的问题 我有一个页面 其中有一个表单 该表单的目标是同一页面上的 iframe iframe

  • 按位非运算符

    为什么要按位运算 0 打印 1 在二进制中 不是0应该是1 为什么 你实际上很接近 在二进制中 不是0应该是1 是的 当我们谈论一位时 这是绝对正确的 然而 一个int其值为0的实际上是32位全零 将所有 32 个 0 反转为 32 个 1

  • 不用AJAX，前台同步拖放文件上传？

    我有一个定期的网站

  • 如何在 ES6 类中使用静态变量？

    我正在尝试在 es6 中使用静态变量 我想声明一个静态变量count in Animal类并增加它 但是 我无法通过声明静态变量static count 0 所以我尝试了另一种方法 class Animal constructor this

  • Primeng 时间表与 Angular2 webpack

    我将使用 Primeng 时间表 http www primefaces org primeng schedule http www primefaces org primeng schedule 在基于 Angular2 webpack

  • Google Apps 脚本：如何水平对齐 inlineImage

    我有以下代码 它是一个更大程序的一部分 我正在尝试将图像从我的 Google 驱动器插入到 Google 文档中 并调整其大小并居中 到目前为止 我能够让程序插入图像并调整其大小 但我不知道如何使 inlineImage 居中 我是使用谷歌

  • 如何在 Android 设备（平板电脑和手机）方向更改时获得正确的窗口宽度

    我正在尝试使用 jquery 函数计算 Android 设备方向变化时的窗口宽度 window outerWidth true 此计算给出了两个方向变化的正确宽度iphone and ipad但在安卓中不行 如果我最初以横向模式或纵向模式加

  • 动态多个延迟 jQuery Ajax 调用

    使用 jQuery 的延迟模式http api jquery com jQuery when http api jquery com jQuery when 我正在尝试进行多个 jsonp ajax 调用并等待结果 然后再进行下一步 我可以

  • 使用 Java 进行 AES 加密并使用 Javascript 进行解密

    我正在制作一个需要基于 Java 的 AES 加密和基于 JavaScript 的解密的应用程序 我使用以下代码作为基本形式进行加密 public class AESencrp private static final String ALG

  • JavaScript 不是 DOM 的一部分吗？

    为什么即使从 DOM 中删除用于创建脚本的代码 脚本仍然可以运行 我遇到了一种情况 我想阻止损坏的脚本运行 查看我的帖子 https stackoverflow com questions 2685581 is there a way to

随机推荐

  • Java基础（24）——异常、处理异常的方式详解及示例

    Java基础 24 异常详解 版权声明 一 异常体系 1 概述 2 异常的根类 Throwable 3 错误 Error 4 Exception 二 异常的处理方式 1 默认的异常处理方式 2 try catch方式 1 基本知识 2 使用

  • boost::sort::block_indirect_sort相关的测试程序

    boost sort block indirect sort是Boost库中的一个排序算法 它在排序大型数据集时表现出色 本文将介绍如何使用Boost库中的block indirect sort算法 并提供一个相关的测试程序 首先 确保已经

  • 帆软设置参数框样式

    修改前 修改后 ps 取消掉参数面板的 常用参数组合 自定义初始化控件后点击文本框会弹出对应的显示框 each this options form name widgets function i item console info item

  • android.util.AndroidRuntimeException: You cannot combine custom titles with other title features

    在做项目的时候自定义一个TitleBar 但是 其中是用到TabHost ActivityGroup 左右滑动的时候 由于TabHost中有个默认的titleBar 而在哪个自己的主界面也有一个titlebar 两个冲突了所以会报错andr

  • 【算法竞赛宝典】语言之争

    算法竞赛宝典 语言之争 题目描述 代码展示 题目描述 代码展示 语言之争 include

  • linux下查看系统安装时间,Linux下如何查看系统启动时间和运行时间以及安装时间...

    1 uptime命令 输出 16 11 40 up 59 days 4 21 2 users load average 0 00 0 01 0 00 2 查看 proc uptime文件计算系统启动时间 cat proc uptime 输出

  • 数值计算笔记之插值(三) 分段线性插值

    0 回顾 对于 拉格朗日插值多项式与牛顿插值多项式的统一 次拉格朗日插值多项式为 其中 牛顿插值公式 在插值节点 插值条件相同的情况下 二者本质一样 只是计算过程不一样 牛顿插值适合需要增加节点 提高精度的情况 不需要重新开始计算 可以利用

  • dfs和bfs求二叉树的深度

    方法一 后序遍历 DFS 树的后序遍历 深度优先搜索往往利用 递归 或 栈 实现 本文使用递归实现 关键点 此树的深度和其左 右 子树的深度之间的关系 显然 此树的深度 等于 左子树的深度 与 右子树的深度 中的 最大值 1 终止条件 当

  • 数据结构_43

    主要内容 背包问题 关键路径 一 背包问题 给定空间 给定物品 选取最符合条件的物品 0 1背包 完全背包 多重背包 二 关键路径 AOV网中完成所有事件需要的最短时间 最长路径 关键活动所在的路径 AOV网 有向带权图 起点 入度为零 终

  • 机械革命旷世e win10 ubuntu20双系统（安装与删除）

    参考 https www bilibili com video BV1554y1n7zv 这里面把整体性的东西说的很清楚 这里我主要记录对这个机型的一些特别不一样的地方 注意事项 1 一定要先解决磁盘的bitlocker状态 那个有影响 2

  • FISCO BCOS（十九）———新开虚拟机在搭建区块链平台时的部分问题及解决办法

    1 新开虚拟机的密码认证问题 2 网卡固定问题 root wyg virtual machine vim etc netplan 01 network manager all yaml 3 ubuntu远程连接的问题 4 无法解析域名 cn

  • 魔兽世界怀旧服哪个服务器金价稳定,魔兽世界怀旧服 金价到底会跌到多少的分析...

    原标题 魔兽世界怀旧服 金价到底会跌到多少的分析 魔兽世界怀旧服有一个特点 大家对金价的敏感程度堪比外汇买家 在外汇交流群都没见过如此频率的价格关注与分析 在魔兽怀旧服 几乎人人都是满仓炒家 每次金价下跌一片哀嚎的景象 还真是MMORPG里

  • adb push&pull文件方法

    adb push命令 从电脑上传送文件到设备 adb pull命令 从手机传送文件到电脑 pull命令 从手机传送文件到电脑 a cmd 控制台 adb connect ip 连接设备 b adb devices查看设备连接情况 c 将设备

  • 【VS2010学习笔记】【函数学习】一（VC6.0和VS2010主函数的不同）

    问题 为什么VC6 0中主函数为main 而VS2010中为 tmain 1 Main是所有c或c 的程序执行的起点 tmain是main为了支持unicode所使用的main的别名 tmain 不过是unicode版本的的main 2 t

  • 题目 1052: [编程入门]链表合并

    已有a b两个链表 每个链表中的结点包括学号 成绩 要求把两个链表合并 按学号升序排列 输入格式 第一行 a b两个链表元素的数量N M 用空格隔开 接下来N行是a的数据 然后M行是b的数据 每行数据由学号和成绩两部分组成 输出格式 按照学

  • 相机模型-计算机视觉

    摄像机的基本成像模型 通常称为针孔模型 pinhole model 由三维空间到像平面的中心投影变换给出 如上图 a 所示 空间点Oc是投影中心 它到平面 的距离为f 空间点Xc在平面 上的投影 像 是以点Oc为端点并经过Xc的射线与平面

  • 导出七牛云的数据到本地服务器

    大概半年多以前 七牛云就失效了 一个是欠费再一个是没有绑定域名 听说是七牛云被举报了然后就必须要实名认证了 而且测试域名的时间也变得只有一个月之久 基本没什么作用了 如果绑定域名 需要该域名是备案的域名 这对于大部分自建博客的人来说基本就是

  • Node.js实现简单爬虫 讲解

    一 什么是爬虫 网络爬虫 又称为网页蜘蛛 网络机器人 在FOAF社区中间 更经常的称为网页追逐者 是一种按照一定规则 自动的抓取万维网信息的程序或者脚本 另外一些不常使用的名字还有蚂蚁 自动索引 模拟程序或者蠕虫 搜索引擎 今日头条 网易新

  • torch函数详解

    torchvision torchvision transforms Compose transforms 把几个转换组合 torch nn Conv2d CLASS torch nn Conv2d in channels out chan

  • Webpack5 教程(3)--处理图片资源

    目录 处理图片资源 1 配置 2 添加图片资源 3 使用图片资源 4 运行指令 5 输出资源情况 6 对图片资源进行优化 修改输出资源的名称和路径 1 配置 2 修改 index html 3 运行指令 自动清空上次打包资源 1 配置 2

热门标签