WebPack5基础使用总结(一)

news2024/11/26 19:40:16

WebPack5基础使用总结

  • 1、WebPack
    • 1.1、开始使用
    • 1.2、基本配置
  • 2、处理样式资源
    • 2.1、处理Css资源
    • 2.2、处理Less资源
    • 2.3、处理Sass和Scss资源
    • 2.4、处理Styl资源
  • 3、处理图片资源
    • 3.1、输出资源情况
    • 3.2、对图片资源进行优化
  • 4、修改输出资源的名称和路径
    • 4.1、自动清空上次打包资源
  • 5、处理字体图标资源

配套视频：尚硅谷Webpack5入门到原理

1、WebPack

Webpack 是一个静态资源打包工具。

  • 它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。
  • 输出的文件就是编译好的文件，就可以在浏览器段运行了。
  • 我们将 Webpack 输出的文件叫做 bundle。

Webpack 本身功能是有限的:

  • 开发模式：仅能编译 JS 中的 ES Module 语法
  • 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

1.1、开始使用

  1. 资源目录如下
01_HelloWebpack # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件
  1. js中文件内容如下
  • count.js
export default function count(x, y) {
  return x - y;
}
  • sum.js
export default function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}
  • main.js
import count from "./js/count";
import sum from "./js/sum";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
  1. 打开终端，来到项目根目录。运行以下指令：
# 初始化 package.json
npm init -y

此时会生成一个基础的 package.json 文件。需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

  1. 下载 WebPack-cli 到开发依赖中
npm i webpack webpack-cli -D
  1. 启用webpack
# 开发模式
npx webpack ./src/main.js --mode=development

# 生产模式
npx webpack ./src/main.js --mode=production
  • npm 是用来下载包的，npx 会将 node_modules 中的 bin 目录临时添加为环境变量，这样就可以访问环境变量的应用程序，例如 webpack
    • npx webpack: 是用来运行本地安装 Webpack 包的
  • webpack会以一个文件或多个文件作为入口
    • ./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。
  • --mode=xxx：指定模式（环境）
  1. 观察输出文件

默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了

注意：

  • Webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错
  • 所以我们学习 Webpack，就是主要学习如何处理其他资源

1.2、基本配置

先熟悉WebPack五大核心概念：

  1. entry：入口
    • 指示 Webpack 从哪个文件开始打包
  2. output ：输出
    • 指示 Webpack 打包完的文件输出到哪里去，如何命名等
  3. loader ： 加载器
    • webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader
  4. plugins：插件
    • 扩展 Webpack 的功能
  5. mode : 模式
    • 开发模式：development
    • 生产模式：production

我们在项目根目录下新建 webpack.config.js 文件，如下：

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    // loader的配置
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

此时因为配置了 webpack，所以这个时候运行打包webpack只需要：

npx webpack

Webpack 将来都通过 webpack.config.js 文件进行配置，来增强 Webpack 的功能

2、处理样式资源

  • Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源。

  • 本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源

  • 我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用，官方文档找不到的话，可以从社区 Github 中搜索查询

Loaders | webpack 中文文档 (docschina.org)

2.1、处理Css资源

在这里插入图片描述

  1. 首先安装 css-loader 和 style-loader
# 把 css-loader、style-loader 加入开发依赖
npm i css-loader style-loader -D
  • css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
  • style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

此时样式就会以 Style 标签的形式在页面上生效

  1. 配置 webpack.config.js
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"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};
  1. 添加src/css/index.css
.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}

修改src/main.js

import count from "./js/count";
import sum from "./js/sum";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";

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>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <!-- 引入打包后的js文件，才能看到效果 -->
    <script src="../dist/main.js"></script>
  </body>
</html>
  1. 运行指令，然后打开 index.html 页面查看效果
npx webpack

2.2、处理Less资源

  1. 安装包
# 将 less 和 less-loader 下载到开发环境
npm install less less-loader --save-dev
  • less-loader：负责将 Less 文件编译成 Css 文件
  1. 将该 loader 添加到 webpack.config.js 中
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    // loader的配置
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};
  1. 添加文件 src/less/index.less
.box2 {
  width: 100px;
  height: 100px;
  background-color: deeppink;
}

修改文件 main.js

import count from "./js/count";
import sum from "./js/sum";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";
// 引入 Less 资源，Webpack才会对其打包
import "./less/index.less";

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>
<!-- 准备一个使用样式的 DOM 容器 -->
<div class="box1"></div>
<div class="box2"></div>
<!-- 引入打包后的js文件，才能看到效果 -->
<script src="../dist/main.js"></script>
</body>
</html>

2.3、处理Sass和Scss资源

  1. 安装包
# 将 sass sass-loader 下载到开发环境
npm i sass-loader sass -D
  • sass-loader：负责将 Sass 文件编译成 css 文件
  • sass：sass-loader 依赖 sass 进行编译
  1. 将该 loader 添加到 webpack.config.js 中
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    // loader的配置
    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"],
      },
    ],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};
  1. 添加文件 src/sass/index.sass
/* 可以省略大括号和分号 */
.box3
  width: 100px
  height: 100px
  background-color: hotpink

添加文件src/sass/index.scss

.box4 {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}

修改文件main.js

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

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>
<!-- 准备一个使用样式的 DOM 容器 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<!-- 引入打包后的js文件，才能看到效果 -->
<script src="../dist/main.js"></script>
</body>
</html>
  1. 运行指令,打开 index.html 页面查看效果
npx webpack

2.4、处理Styl资源

  1. 下载包
# 把stylus stylus-loader放到开发环境中
npm install stylus stylus-loader --save-dev

stylus-loader：负责将 Styl 文件编译成 Css 文

  1. 将该 loader 添加到 webpack.config.js 中
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    // loader的配置
    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"],
      },
    ],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};
  1. 添加文件 src/styl/index.styl
/* 可以省略大括号、分号、冒号 */
.box 
  width 100px 
  height 100px 
  background-color pink

修改 src/main.js

import count from "./js/count";
import sum from "./js/sum";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";
// 引入 Less 资源，Webpack才会对其打包
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>
<!-- 准备一个使用样式的 DOM 容器 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<!-- 引入打包后的js文件，才能看到效果 -->
<script src="../dist/main.js"></script>
</body>
</html>
  1. 运行指令
npx webpack

3、处理图片资源

  • 过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理
  • 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    // loader的配置
    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", // 开发模式
};

  1. 添加图片资源

    • src/images/1.jpeg

    • src/images/2.png

  2. 使用图片资源

    • src/less/index.less

      .box2 {
  width: 100px;
  height: 100px;
  //background-color: deeppink;

  background-image: url("../images/1.jpeg");
  // 保证图片的原宽高比
  background-size: cover;

}

    • src/sass/index.sass

      /* 可以省略大括号和分号 */
.box3
  width: 100px
  height: 100px
  //background-color: hotpink
  background-image: url("../images/2.png")
  background-size: cover

  3. 运行指令

    npx webpack

    打开 index.html 页面查看效果

3.1、输出资源情况

此时如果查看 dist 目录的话，会发现多了三张图片资源，因为 Webpack 会将所有打包好的资源输出到 dist 目录下。

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

3.2、对图片资源进行优化

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

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    // loader的配置
    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", // 开发模式
};

之后再运行

npx webpack

这样 dist 目录就只会有大于10Kb的图片了，因为小于10kb的图片会被 base64 处理

base64：将图片转换成一串序列

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

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

从上方我们可以发现，打包的资源都集中在了 dist 目录，这会很乱，我们想让图片打包到图片文件夹下，js 打包到 js 文件夹下该怎么做呢？

在 webpack.config.js 中进行修改：

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名,入口文件打包输出到 `static/js/main.js`中,其他文件仍打包到上方 path 下
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中

  },
  // 加载器
  module: {
    // loader的配置
    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", // 开发模式
};

在这里插入图片描述

之后清空打包的文件夹dist ，也就是删除 dist 文件夹，然后执行如下命令

npx webpack

这样js打包的文件夹就变成了 dist/static/js，图片打包的文件夹就变成了 static/imgs

修改 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>
<!-- 准备一个使用样式的 DOM 容器 -->
<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>

4.1、自动清空上次打包资源

手动清空打包资源比较麻烦，我们配置一下：clean: true

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名,入口文件打包输出到 `static/js/main.js`中,其他文件仍打包到上方 path 下
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
    
  },
  // 加载器
  module: {
    // loader的配置
    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", // 开发模式
};

5、处理字体图标资源

  1. 打开阿里巴巴矢量图标库
  2. 挑选自己喜欢的图标，加入到购物车，在右上角购物车里面选择 - 添加到项目 - 下载到本地
  3. 解压
  4. 将 .ttf、.woff、.woff2 后缀的文件复制进 src/fonts 下
  5. 将 iconfont.css 复制进 src/css 下
    • 注意字体文件路径需要修改

在这里插入图片描述

  1. 在src/main.js 中引用资源
import count from "./js/count";
import sum from "./js/sum";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";
// 引入 Less 资源，Webpack才会对其打包
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";
import "./css/iconfont.css";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
  1. 在 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>
<!-- 准备一个使用样式的 DOM 容器 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<!-- 使用字体图标 -->
<i class="iconfont icon-dianlita"></i>
<i class="iconfont icon-dianchi"></i>
<i class="iconfont icon-fengche"></i>
<i class="iconfont icon-shuju"></i>
<i class="iconfont icon-wenjian"></i>
<!-- 修改 js 资源路径 -->
<script src="../dist/static/js/main.js"></script>
</body>
</html>

这里使用字体图标文件怎么使用呢，可以在下载的解压包里面的demo_index.html 查看用法，我这里用的是 Font Css 用法

在这里插入图片描述

  1. 在 webpack.config.js 中配置打包目录
{
    	// 开发中可能还存在一些其他资源，如音视频等，我们也一起处理了
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
            generator: {
                filename: "static/media/[hash:8][ext][query]",
            },
},

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

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

打开 index.html 页面查看效果

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1023583.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

想了解期权分仓交易和开户？这里告诉你。

想了解期权分仓交易和开户？这里告诉你。

期想了解期权分仓交易和开户&#xff1f;这里告诉你。权就是合约交易&#xff0c;通过买卖认购和认沽期权合约实现未来是否能赚钱&#xff0c;具备做多和做空T0双向交易机制&#xff0c;期权分仓开户就是零门槛开通期权账户&#xff0c;下文介绍想了解期权分仓交易和开户&#…
阅读更多...
经验分享｜作为程序员之后了解到的算法知识

经验分享｜作为程序员之后了解到的算法知识

欢迎关注博主 六月暴雪飞梨花 或加入【六月暴雪飞梨花】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术…
阅读更多...
Java————栈

Java————栈

一 、栈 Stack继承了Vector&#xff0c;Vector和ArrayList类似&#xff0c;都是动态的顺序表&#xff0c;不同的是Vector是线程安全的。 是一种特殊的线性表&#xff0c; 其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端称为栈顶&#xff0c;另…
阅读更多...
《计算机视觉中的多视图几何》笔记（4）

《计算机视觉中的多视图几何》笔记（4）

4 Estimation – 2D Projective Transformations 本章主要估计这么几种2D投影矩阵&#xff1a; 2D齐次矩阵&#xff0c;就是从一个图像中的点到另外一个图像中的点的转换&#xff0c;由于点的表示都是齐次的&#xff0c;所以叫齐次矩阵3D到2D的摄像机矩阵基本矩阵三视图之间的…
阅读更多...
基于conda的相关命令

基于conda的相关命令

conda 查看python版本环境 打开Anaconda Prompt的命令输入框 查看自己的python版本 conda env list激活相应的python版本(环境&#xff09; conda avtivate python_3.9 若输入以下命令可查看python版本 python -V #注意V是大写安装相应的包 pip install 包名5.查看已安装…
阅读更多...
智能井盖：提升城市井盖安全管理效率

智能井盖：提升城市井盖安全管理效率

窨井盖作为城市基础设施的重要组成部分&#xff0c;其安全管理与城市的有序运行和群众的生产生活安全息息相关&#xff0c;体现城市管理和社会治理水平。当前&#xff0c;一些城市已经将智能化的窨井盖升级改造作为新城建的重要内容&#xff0c;推动窨井盖等“城市部件”配套建…
阅读更多...
工控机通过Profinet转Modbus RTU网关连接变频器与电机通讯案例

工控机通过Profinet转Modbus RTU网关连接变频器与电机通讯案例

在工业自动化系统中&#xff0c;工控机扮演着重要的角色&#xff0c;它是数据采集、处理和控制的中心。工控机通过Profinet转Modbus RTU网关连接变频器与电机通讯&#xff0c;为工业自动化系统中的设备之间的通信提供了解决方案。工控机通过Profinet转Modbus RTU网关的方式&…
阅读更多...
（leetcode）单值二叉树

（leetcode）单值二叉树

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 题目&#xff1a; 思路&#xff1a; 代码&#xff1a; 画图与分析&#xff1a; 题目&#xff1a; 如果二叉树每个节点都具有相同的值&#xff0c;那么该二叉树就是单值二叉树。 只有给定的树是单值二叉树时&…
阅读更多...
2023年以就业为目的学习Java还有必要吗？（文末送书）

2023年以就业为目的学习Java还有必要吗？（文末送书）

目录 一、活力四射的 Java二、从零开始学会 Java三、准备工作四、基础知识五、进阶知识六、高级知识七、结语参与方式 大家好&#xff0c;我是哪吒。 文末送5本《Java编程动手学》 今天来探讨一个问题&#xff0c;现在学 Java 找工作还有优势吗&#xff1f; 在某乎上可以看到…
阅读更多...
MS1861 视频处理与显示控制器 HDMI转MIPI LVDS转MIPI带旋转功能 图像带缩放，旋转，锐化

MS1861 视频处理与显示控制器 HDMI转MIPI LVDS转MIPI带旋转功能 图像带缩放，旋转，锐化

1. 基本介绍 MS1861 单颗芯片集成了 HDMI 、 LVDS 和数字视频信号输入&#xff1b;输出端可以驱动 MIPI(DSI-2) 、 LVDS 、 Mini-LVDS 以及 TTL 类型 TFT-LCD 液晶显示。可支持对输入视频信号进行滤波&#xff0c;图 像增强&#xff0c;锐化&#xff0c;对比度调节&am…
阅读更多...
ai虚拟主播看车线上虚拟三维展示节约成本和资源

ai虚拟主播看车线上虚拟三维展示节约成本和资源

线上车展汽车3D展厅突破了前期虚拟和现实的障碍&#xff0c;使用户无论身在哪个城市&#xff0c;都可以随时随地在线3D看车&#xff0c;极大的方便了消费者的看车的线上体验。因此对企业来说&#xff0c;有购车意愿的顾客必然是会提高成交的可能性&#xff0c;那么如何满足顾客…
阅读更多...
固定资产管理系统的特点有哪些

固定资产管理系统的特点有哪些

固定资产管理系统是一种用于管理企业固定资产的软件。其功能如下&#xff1a;　　自动化管理&#xff1a;固定资产管理系统可自动管理企业固定资产&#xff0c;包括采购、仓储、申请、维护、损坏等流程&#xff0c;大大提高了工作效率。　　实时监控&#xff1a;固定资产管理系…
阅读更多...
Python 点云处理--半径滤波 【open3d实现】【可视化输出】

Python 点云处理--半径滤波 【open3d实现】【可视化输出】

目录 一、原理二、环境搭建三、代码实现一、原理 半径滤波以某点为中心画一个圆计算落在该圆中点的数量，当数量大于给定值时，则保留该点，数量小于给定值则剔除该点。因此，使用该算法时需要对搜索半径和近邻点个数阈值进行设置。 二、环境搭建 安装open3d三方库 直接: pi…
阅读更多...
准备篇（三）Python 爬虫第三方库

准备篇（三）Python 爬虫第三方库

第三方库无法将 "pip" 识别ModuleNotFoundError: No module named pip install 安装路径相关问题requests 库和 BeautifulSoup 库requests 库BeautifulSoup 库第三方库 Python 的 标准库 中提供了许多有用的模块和功能，如字符串处理、网络通信、多线程等，但它们并…
阅读更多...
python3.11版本pip install ddddocr调用时报错got an unexpected keyword argument ‘det‘ 解决

python3.11版本pip install ddddocr调用时报错got an unexpected keyword argument ‘det‘ 解决

一、如图出现如下问题 ddddocr.__init__() got an unexpected keyword argument det出现问题原因&#xff1a;python3.11默认安装版本就旧版的ddddocr1.0的&#xff0c;所以导致如下报错 二、解决方案一&#xff08;推荐&#xff09; python3.11的环境直接安装这个即可&…
阅读更多...
我们如何将机器学习应用到 Positive Technologies 产品中

我们如何将机器学习应用到 Positive Technologies 产品中

今天&#xff0c;我们将向您介绍 ML 如何帮助安全专家实现自动化操作并检测网络攻击。首先&#xff0c;我们将分析理论基础&#xff0c;然后用我们工作中的案例加以证明。 我们为什么使用 ML 在讨论使用机器学习模型的必要性之前&#xff0c;我们有必要先了解安全工具的工作原…
阅读更多...
2023年天津专升本建档立卡、退役免试、大赛获奖免试招生计划

2023年天津专升本建档立卡、退役免试、大赛获奖免试招生计划

有关普通高校&#xff0c;市大学软件学院&#xff0c;市教育招生考试院&#xff1a; 经有关高校申请&#xff0c;并结合天津实际情况&#xff0c;共安排2023年普通高校高职升本科招生计划3160人&#xff0c;其中安排“建档立卡贫困家庭毕业生专升本专项计划”112人&#xff0c…
阅读更多...
【Java 基础篇】Java Properties 详解：配置文件和键值对存储

【Java 基础篇】Java Properties 详解：配置文件和键值对存储

在 Java 编程中&#xff0c;配置文件和键值对存储是非常常见的需求&#xff0c;用于存储应用程序的配置参数、用户首选项、国际化信息等。Java 提供了 Properties 类来处理这种类型的数据&#xff0c;它是一个轻量级的配置文件和键值对存储工具。本文将详细介绍 Java 的 Proper…
阅读更多...
看顶级测工怎么玩转Apifox接口测试工具

看顶级测工怎么玩转Apifox接口测试工具

一、Apifox简介 官网地址&#xff1a;https://www.apifox.cn/?utm_sourceczzl 1、Apifox 定位 Apifox Postman Swagger Mock JMeterApifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台。通过一套系统、一份数据&#xff0c;解决多个系统之间的数据同…
阅读更多...
嵌入式养成计划-29-网络编程----TCP与UDP的基础模型

嵌入式养成计划-29-网络编程----TCP与UDP的基础模型

Linux下&#xff0c;基于TCP与UDP协议&#xff0c;不同进程下单线程通信服务器 Linux下&#xff0c;基于TCP与UDP协议&#xff0c;不同进程下单线程通信服务器 六十五、TCP与UDP的基础模型 1. socket 1.1 套接字概念 最早的套接字和共享内存&#xff0c;消息队列&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023