Résumé de l'utilisation de base de WebPack5 (1)

Language 2023-10-04 19:07:47 views: null

Résumé de l'utilisation de base de WebPack5

Vidéo de support : Démarrer avec Webpack 5 dans Shang Silicon Valley
Code de support : https://gitee.com/Augenstern-creator/kuang-study-web-pack5
Insérer la description de l'image ici

1、WebPack

WebpackIl s’agit d’un outil de packaging de ressources statiques.

  • Il utilisera un ou plusieurs fichiers comme point d'entrée pour l'empaquetage, compilera et combinera tous les fichiers de l'ensemble de notre projet en un ou plusieurs fichiers et les affichera.
  • Le fichier de sortie est le fichier compilé et peut être exécuté dans la section du navigateur.
  • Nous Webpackappelons le fichier de sortie bundle.

Webpack lui-même a des fonctionnalités limitées :

  • ES ModuleMode développement : seule la syntaxe en JS peut être compilée
  • Mode production : peut compiler la syntaxe en JS ES Moduleet compresser le code JS

1.1. Commencez à utiliser

  1. Le répertoire des ressources est le suivant
01_HelloWebpack # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件
  1. Le contenu du fichier en js est le suivant
  • 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. Ouvrez le terminal et accédez au répertoire racine du projet. Exécutez la commande suivante :
# 初始化 package.json
npm init -y

Un package.jsonfichier de base sera généré à ce stade. Il convient de noter que package.jsonle namechamp du milieu ne peut pas être appelé webpack, sinon une erreur sera signalée à l'étape suivante.

  1. Téléchargez WebPack-cli dans les dépendances de développement
npm i webpack webpack-cli -D
  1. activer le pack Web
# 开发模式
npx webpack ./src/main.js --mode=development

# 生产模式
npx webpack ./src/main.js --mode=production
  • npmIl est utilisé pour télécharger des packages. npxIl ajoutera temporairement le répertoire bin dans node_modules en tant que variable d'environnement, afin que les applications pouvant accéder aux variables d'environnement, telles que webpack
    • npx webpack: est utilisé pour exécuter Webpackles packages d'installation locaux
  • webpack utilisera un ou plusieurs fichiers comme point d'entrée
    • ./src/main.js: Spécifiez de démarrer l'empaquetage Webpackà partir main.jsdu fichier. Non seulement il sera empaqueté main.js, mais ses dépendances seront également empaquetées ensemble.
  • --mode=xxx:Spécifier le mode (environnement)
  1. Regardez le fichier de sortie

Par défaut, Webpackles fichiers seront empaquetés et sortis dans distle répertoire. Nous distpouvons simplement vérifier les fichiers dans le répertoire.

Avis:

  • WebpackIl a relativement peu de fonctions et ne peut gérer que jsdes ressources. Une fois qu'il rencontre cssd'autres ressources telles que , une erreur sera signalée.
  • Ainsi, lorsque nous étudions Webpack, nous apprenons principalement à gérer d'autres ressources.

1.2. Configuration de base

Tout d’abord, familiarisez-vous avec les cinq concepts fondamentaux de WebPack :

  1. entry:Entrée
    • Indiquez à Webpack à partir duquel démarrer l'empaquetage
  2. output:sortir
    • Indiquez à Webpack où sortir les fichiers packagés, comment les nommer, etc.
  3. loader: Chargeur
    • le webpack lui-même ne peut gérer que js, json et d'autres ressources, les autres ressources doivent utiliser le chargeur
  4. plugins:Brancher
    • Extension des fonctionnalités de Webpack
  5. mode: modèle
    • Mode de développement : développement
    • Mode de production : production

Nous créons un nouveau fichier dans le répertoire racine du projet webpack.config.js, comme suit :

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

Étant donné que le webpack est configuré à ce moment-là, il vous suffit d'exécuter le webpack packagé à ce moment :

npx webpack

Webpack sera webpack.config.jsconfiguré via des fichiers à l'avenir pour améliorer les fonctionnalités de Webpack

2. Ressources de style de processus

  • Webpack lui-même ne peut pas reconnaître les ressources de style, nous devons donc utiliser Loader pour aider Webpack à analyser les ressources de style.

  • Dans ce chapitre, nous apprenons comment utiliser Webpack pour traiter les ressources de style Css, Less, Sass, Scss et Styl.

  • Lorsque nous recherchons un Loader, nous devons trouver le Loader correspondant dans la documentation officielle, puis l'utiliser. Si nous ne trouvons pas la documentation officielle, nous pouvons la rechercher dans la communauté Github.

Chargeurs | Documentation chinoise du webpack (docschina.org)

2.1. Traitement des ressources CSS

Insérer la description de l'image ici

  1. Installez d'abord css-loaderetstyle-loader
# 把 css-loader、style-loader 加入开发依赖
npm i css-loader style-loader -D
  • css-loader: Responsable de la compilation des fichiers CSS en modules que Webpack peut reconnaître
  • style-loader: Une balise Style sera créée dynamiquement, qui contiendra le contenu du module Css dans Webpack.

À ce stade, le style prendra effet sur la page sous la forme d’une balise Style.

  1. Configurationwebpack.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. Ajouter àsrc/css/index.css
.box1 {
    
    
  width: 100px;
  height: 100px;
  background-color: pink;
}

Révisersrc/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));

Ajouter à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. Exécutez la commande puis ouvrez index.htmlla page pour voir l'effet
npx webpack

2.2. Traitement Moins de ressources

  1. Forfait d'installation
# 将 less 和 less-loader 下载到开发环境
npm install less less-loader --save-dev
  • less-loader: Responsable de la compilation des fichiers Less en fichiers CSS
  1. Ajoutez ce chargeur 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. Ajouter des fichierssrc/less/index.less
.box2 {
  width: 100px;
  height: 100px;
  background-color: deeppink;
}

Modifier des fichiersmain.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));

Réviserpublic/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. Traitement des ressources Sass et Scss

  1. Forfait d'installation
# 将 sass sass-loader 下载到开发环境
npm i sass-loader sass -D
  • sass-loader: Responsable de la compilation des fichiers Sass en fichiers CSS
  • sass: sass-loaderDépend sassde la compilation
  1. Ajoutez ce chargeur 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. Ajouter des fichierssrc/sass/index.sass
/* 可以省略大括号和分号 */
.box3
  width: 100px
  height: 100px
  background-color: hotpink

Ajouter des fichierssrc/sass/index.scss

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

Modifier des fichiersmain.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));

Réviserpublic/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. Exécutez la commande et ouvrez index.htmlla page pour voir l'effet
npx webpack

2.4. Ressources de style de traitement

  1. Télécharger le package
# 把stylus stylus-loader放到开发环境中
npm install stylus stylus-loader --save-dev

stylus-loader: Responsable de la compilation des fichiers Styl en fichiers Css

  1. Ajoutez ce chargeur 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. Ajouter des fichierssrc/styl/index.styl
/* 可以省略大括号、分号、冒号 */
.box 
  width 100px 
  height 100px 
  background-color pink

Révisersrc/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));

Réviserpublic/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. exécuter la commande
npx webpack

3. Ressources d'image de processus

  • Dans le passé, dans Webpack4, nous traitions les ressources d'images via file-loadereturl-loader
  • Maintenant, Webpack5 a intégré deux fonctions Loader dans Webpack. Nous n'avons besoin que d'une configuration simple pour traiter les ressources d'image.
// 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. Ajouter des ressources d'images

    • src/images/1.jpeg

    • src/images/2.png

  2. Utiliser des ressources d'images

    • 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. exécuter la commande

    npx webpack

    Ouvrez la page index.html pour voir l'effet

3.1. Situation des ressources de production

Si vous regardez le répertoire dist à ce moment-là, vous trouverez trois ressources d'image supplémentaires, car Webpack affichera toutes les ressources packagées dans le répertoire dist.

  • Pourquoi n’y a-t-il pas de ressources de style ?
    • Parce qu'après style-loaderle traitement, les ressources de style sont regroupées dans main.js, il n'y a donc pas de sortie supplémentaire.

3.2. Optimiser les ressources d'images

Convertir les images inférieures à une certaine taille sous forme d'URI de données (format 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", // 开发模式
};

Exécutez-le plus tard

npx webpack

De cette façon dist, le répertoire n'aura que des images de plus de 10 Ko, car les images de moins de 10 Ko seront traitées en base64.

base64 : Convertir l'image en séquence

  • Avantages : Réduire le nombre de demandes
  • Inconvénients : le volume devient plus important après conversion

4. Modifiez le nom et le chemin de la ressource de sortie

D'après ce qui précède, nous pouvons constater que les ressources empaquetées sont concentrées dans distle répertoire, ce qui sera très compliqué. Nous voulons que les images soient empaquetées dans le dossier image, et que devons-nous faire si js est empaqueté dans le dossier js ?

webpack.config.jsApportez des modifications dans :

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

Insérer la description de l'image ici

Effacez ensuite le dossier emballé dist, c'est-à-dire supprimez distle dossier, puis exécutez la commande suivante

npx webpack

De cette façon, le dossier empaqueté js devient dist/static/js, et le dossier empaqueté image devientstatic/imgs

Réviserpublic/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. Effacer automatiquement les dernières ressources packagées

Effacer manuellement les ressources packagées est problématique. Configurons-le :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. Traiter les ressources des icônes de police

  1. Ouvrez la bibliothèque d'icônes vectorielles Alibaba
  2. Choisissez l'icône que vous aimez, ajoutez-la au panier, sélectionnez-la dans le panier dans le coin supérieur droit - Ajouter au projet - Télécharger sur local
  3. Décompresser
  4. Copiez .ttf、.woff、.woff2le fichier avec le suffixe src/fontsdans
  5. Copier iconfont.csssous src/css_
    • Notez que le chemin du fichier de police doit être modifié

Insérer la description de l'image ici

  1. src/main.jsCiter des ressources dans
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.htmlUtilisez des icônes de police dans
<!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>

Comment utiliser le fichier d'icône de police ici ? Vous pouvez vérifier l'utilisation dans le package décompressé téléchargé demo_index.html. J'utilise ici l'utilisation de Font Css.

Insérer la description de l'image ici

  1. webpack.config.jsConfigurez le répertoire d'emballage dans
{
    
    
    	// 开发中可能还存在一些其他资源，如音视频等，我们也一起处理了
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
            generator: {
    
    
                filename: "static/media/[hash:8][ext][query]",
            },
},

type: "asset/resource"La différence entre et type: "asset":

  • type: "asset/resource"Équivaut file-loaderà convertir des fichiers en ressources pouvant être reconnues par Webpack et à laisser le reste non traité.
  • type: "asset"Équivalent url-loaderà la conversion de fichiers en ressources que Webpack peut reconnaître, et les ressources inférieures à une certaine taille seront traitées sous forme d'URI de données
  1. exécuter la commande
npx webpack

Ouvrez la page index.html pour voir l'effet

Je suppose que tu aimes

Origine blog.csdn.net/Augenstern_QXL/article/details/133049610
conseillé
Classement
du quotidien
Plus
2024-07-22(0)
2024-07-21(0)
2024-07-20(0)
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)

Code World

© 2018 codetd.com