Краткое описание базового использования WebPack5 (1)

Краткое описание базового использования WebPack5

1、Веб-пакет

1.1. Начать использовать

1.2. Базовая конфигурация

2. Ресурсы стиля процесса

2.1. Обработка CSS-ресурсов

2.2. Обработка меньшего количества ресурсов

2.3 Обработка ресурсов Sass и Scss

2.4. Обработка ресурсов Styl

3. Обработка ресурсов изображений

3.1. Ситуация с выходными ресурсами

3.2. Оптимизация ресурсов изображений

4. Измените имя и путь выходного ресурса.

4.1. Автоматически очищать последние упакованные ресурсы

5. Обработка ресурсов значков шрифтов

Вспомогательное видео: Начало работы с Webpack 5 в Кремниевой долине Шан.
Вспомогательный код: https://gitee.com/Augenstern-creator/kuang-study-web-pack5.

1、Веб-пакет

WebpackЭто инструмент статической упаковки ресурсов.

Он будет использовать один или несколько файлов в качестве точки входа для упаковки, компиляции и объединения всех файлов всего проекта в один или несколько файлов и вывода их.
Выходной файл представляет собой скомпилированный файл, и его можно запустить в разделе браузера.
Мы Webpackвызываем выходной файл bundle.

Сам Webpack имеет ограниченный функционал:

Режим разработки: можно компилировать только ES Moduleсинтаксис JS.
Режим производства: можно компилировать синтаксис в JS ES Moduleи сжимать код JS.

1.1. Начать использовать

Каталог ресурсов выглядит следующим образом

01_HelloWebpack # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

Содержимое файла в 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));

Откройте терминал и перейдите в корневой каталог проекта. Выполните следующую команду:

# 初始化 package.json
npm init -y

package.jsonНа этом этапе будет создан базовый файл. Следует отметить, что package.jsonсреднее nameполе вызывать нельзя webpack, иначе на следующем шаге будет сообщено об ошибке.

Загрузите WebPack-cli для зависимостей разработки.

npm i webpack webpack-cli -D

включить веб-пакет

# 开发模式
npx webpack ./src/main.js --mode=development

# 生产模式
npx webpack ./src/main.js --mode=production

npmОн используется для загрузки пакетов. npxОн временно добавляет каталог bin в node_modules в качестве переменной среды, чтобы приложения, которые могут получить доступ к переменным среды, например веб-пакет
- npx webpack: используется для запуска локальных установочных Webpackпакетов .
веб-пакет будет использовать один или несколько файлов в качестве точки входа.
- ./src/main.js: Укажите , чтобы начать упаковку Webpackиз main.jsфайла. Будет упакован не только он main.js, но и его зависимости.
--mode=xxx:Укажите режим (среду)

Посмотрите выходной файл

По умолчанию Webpackфайлы будут упакованы и выведены в distкаталог, нам distостается только проверить файлы в каталоге.

Уведомление:

WebpackОн имеет относительно мало функций и может обрабатывать только jsресурсы. При обнаружении cssдругих ресурсов, таких как , будет сообщено об ошибке.

Поэтому, когда мы учимся Webpack, мы в основном учимся обращаться с другими ресурсами.

1.2. Базовая конфигурация

Сначала ознакомьтесь с пятью основными концепциями WebPack:

entry:Вход
- Укажите Webpack, с какого файла начинать упаковку.
output:выход
- Укажите Webpack, куда выводить упакованные файлы, как их называть и т. д.
loader: Погрузчик
- сам веб-пакет может обрабатывать только js, json и другие ресурсы, другие ресурсы должны использовать загрузчик.
plugins:Плагин
- Расширение функциональности Webpack
mode: модель
- Режим разработки: разработка
- Режим производства: производство

Создаем новый файл в корневом каталоге проекта 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", // 开发模式
};

Поскольку веб-пакет уже настроен, вам нужно только запустить упакованный веб-пакет:

npx webpack

В будущем Webpack будет webpack.config.jsнастраиваться через файлы для улучшения функциональности Webpack.

2. Ресурсы стиля процесса

Сам Webpack не может распознавать ресурсы стиля, поэтому нам нужно использовать Loader, чтобы помочь Webpack проанализировать ресурсы стиля.
В этой главе мы узнаем, как использовать Webpack для обработки ресурсов стилей Css, Less, Sass, Scss и Styl.
Когда мы ищем загрузчик, мы должны найти соответствующий загрузчик в официальной документации, а затем использовать его. Если мы не можем найти официальную документацию, мы можем найти ее в сообществе Github.

Загрузчики | документация webpack на китайском языке (docschina.org)

2.1. Обработка CSS-ресурсов

Вставьте сюда описание изображения

Сначала установите css-loaderиstyle-loader

# 把 css-loader、style-loader 加入开发依赖
npm i css-loader style-loader -D

css-loader: Отвечает за компиляцию файлов Css в модули, распознаваемые Webpack.

style-loader: будет динамически создан тег Style, который будет содержать содержимое модуля Css в Webpack.

На этом этапе стиль вступит в силу на странице в виде тега Style.

Конфигурация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",
};

добавить в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>

Запустите команду, а затем откройте index.htmlстраницу, чтобы увидеть эффект.

npx webpack

2.2. Обработка меньшего количества ресурсов

Инсталляционный пакет

# 将 less 和 less-loader 下载到开发环境
npm install less less-loader --save-dev

less-loader: Отвечает за компиляцию файлов Less в файлы Css.

Добавьте этот загрузчик 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", // 开发模式
};

добавить файлы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

Инсталляционный пакет

# 将 sass sass-loader 下载到开发环境
npm i sass-loader sass -D

sass-loader: Отвечает за компиляцию файлов Sass в файлы CSS.

sass: sass-loaderЗависит sassот компиляции

Добавьте этот загрузчик 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", // 开发模式
};

добавить файлы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>

Запустите команду и откройте index.htmlстраницу, чтобы увидеть эффект.

npx webpack

2.4. Обработка ресурсов Styl

Скачать пакет

# 把stylus stylus-loader放到开发环境中
npm install stylus stylus-loader --save-dev

stylus-loader: Отвечает за компиляцию файлов Styl в файлы Css.

Добавьте этот загрузчик 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", // 开发模式
};

добавить файлы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>

Команда Run

npx webpack

3. Обработка ресурсов изображений

Раньше в Webpack4 мы обрабатывали ресурсы изображений с file-loaderпомощьюurl-loader
Теперь в Webpack5 встроены две функции Loader, нам нужна только простая настройка для обработки ресурсов изображений.

// 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", // 开发模式
};

Добавьте ресурсы изображений
- src/images/1.jpeg
- src/images/2.png

Используйте ресурсы изображений

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

Команда Run
```
npx webpack
```
Откройте страницу index.html, чтобы увидеть эффект.

3.1. Ситуация с выходными ресурсами

Если вы сейчас посмотрите на каталог dist, вы найдете еще три ресурса изображений, поскольку Webpack выведет все упакованные ресурсы в каталог dist.

Почему нет ресурсов стиля?

Потому что после style-loaderобработки ресурсы стиля упаковываются в main.js, поэтому дополнительного вывода не происходит.

3.2. Оптимизация ресурсов изображений

Преобразование изображений размером меньше определенного в форму 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, в каталоге будут только изображения размером более 10 КБ, поскольку изображения размером менее 10 КБ будут обрабатываться 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. Обработка ресурсов значков шрифтов

Откройте библиотеку векторных значков Alibaba.
Выберите понравившуюся иконку, добавьте ее в корзину, выберите в корзине в правом верхнем углу - Добавить в проект - Загрузить на локальный
Разархивировать
Скопируйте .ttf、.woff、.woff2файл с суффиксом src/fontsв
Скопировать iconfont.cssпод src/css_
- Обратите внимание, что путь к файлу шрифта необходимо изменить.

Вставьте сюда описание изображения

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));

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.

Вставьте сюда описание изображения

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, а ресурсы меньше определенного размера будут обработаны в форме URI данных.

Команда Run

npx webpack

Откройте страницу index.html, чтобы увидеть эффект.