Resumen del uso básico de WebPack5 (1)

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

Resumen del uso básico de WebPack5

Vídeo de soporte: Introducción a Webpack 5 en Shang Silicon Valley
Código de soporte: https://gitee.com/Augenstern-creator/kuang-study-web-pack5
Insertar descripción de la imagen aquí

1、Paquete web

WebpackEs una herramienta de empaquetado de recursos estáticos.

  • Utilizará uno o más archivos como punto de entrada para empaquetar, compilar y combinar todos los archivos de todo nuestro proyecto en uno o más archivos y generarlos.
  • El archivo de salida es el archivo compilado y se puede ejecutar en la sección del navegador.
  • Llamamos Webpackal archivo de salida bundle.

El propio Webpack tiene una funcionalidad limitada:

  • Modo de desarrollo: solo se puede compilar ES Modulela sintaxis en JS
  • Modo de producción: puede compilar sintaxis en JS ES Moduley comprimir código JS.

1.1. Empezar a usar

  1. El directorio de recursos es el siguiente.
01_HelloWebpack # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件
  1. El contenido del archivo en js es el siguiente
  • 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. Abra la terminal y vaya al directorio raíz del proyecto. Ejecute el siguiente comando:
# 初始化 package.json
npm init -y

package.jsonEn este punto se generará un archivo básico . Cabe señalar que no se puede llamar package.jsonal campo del medio ; de lo contrario, se informará un error en el siguiente paso.namewebpack

  1. Descargue WebPack-cli para desarrollar dependencias
npm i webpack webpack-cli -D
  1. habilitar paquete web
# 开发模式
npx webpack ./src/main.js --mode=development

# 生产模式
npx webpack ./src/main.js --mode=production
  • npmSe utiliza para descargar paquetes. npxAgregará temporalmente el directorio bin en node_modules como una variable de entorno, para que las aplicaciones que puedan acceder a las variables de entorno, como webpack
    • npx webpack: se utiliza para ejecutar Webpackpaquetes de instalación locales
  • El paquete web utilizará uno o varios archivos como punto de entrada.
    • ./src/main.js: Especifique comenzar a empaquetar Webpackdesde main.jsel archivo. No solo se empaquetará main.js, sino que también se empaquetarán sus dependencias juntas.
  • --mode=xxx:Especificar modo (entorno)
  1. Mira el archivo de salida

De forma predeterminada, Webpacklos archivos se empaquetarán y se enviarán al distdirectorio. distPodemos simplemente verificar los archivos en el directorio.

Aviso:

  • WebpackTiene relativamente pocas funciones y solo puede manejar jsrecursos. Una vez que encuentre cssotros recursos como, se informará un error.
  • Entonces, cuando estudiamos Webpack, principalmente aprendemos a manejar otros recursos.

1.2 Configuración básica

Primero, familiarícese con los cinco conceptos básicos de WebPack:

  1. entry:Entrada
    • Indique a Webpack desde qué archivo comenzar a empaquetar
  2. output:producción
    • Indique a Webpack dónde generar los archivos empaquetados, cómo nombrarlos, etc.
  3. loader: Cargador
    • El paquete web en sí solo puede manejar js, json y otros recursos, otros recursos necesitan usar el cargador.
  4. plugins:Enchufar
    • Ampliando la funcionalidad de Webpack
  5. mode: modelo
    • Modo de desarrollo: desarrollo
    • Modo de producción: producción

Creamos un nuevo archivo en el directorio raíz del proyecto webpack.config.js, de la siguiente manera:

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

Debido a que el paquete web está configurado en este momento, en este momento solo necesita ejecutar el paquete web empaquetado:

npx webpack

Webpack se webpack.config.jsconfigurará mediante archivos en el futuro para mejorar la funcionalidad de Webpack

2. Recursos de estilo de proceso

  • Webpack en sí no puede reconocer los recursos de estilo, por lo que debemos usar Loader para ayudar a Webpack a analizar los recursos de estilo.

  • En este capítulo aprendemos cómo usar Webpack para procesar recursos de estilo Css, Less, Sass, Scss y Styl.

  • Cuando buscamos un Loader, debemos buscar el Loader correspondiente en la documentación oficial y luego usarlo. Si no podemos encontrar la documentación oficial, podemos buscarla en la comunidad Github.

Cargadores | documentación china del paquete web (docschina.org)

2.1 Procesamiento de recursos CSS

Insertar descripción de la imagen aquí

  1. Primero instale css-loaderystyle-loader
# 把 css-loader、style-loader 加入开发依赖
npm i css-loader style-loader -D
  • css-loader: Responsable de compilar archivos Css en módulos que Webpack pueda reconocer
  • style-loader: Se creará dinámicamente una etiqueta de estilo, que contendrá el contenido del módulo Css en Webpack.

En este punto, el estilo entrará en vigor en la página en forma de etiqueta de estilo.

  1. Configuraciónwebpack.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. añadirsrc/css/index.css
.box1 {
    
    
  width: 100px;
  height: 100px;
  background-color: pink;
}

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

añadirpublic/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. Ejecute el comando y luego abra index.htmlla página para ver el efecto.
npx webpack

2.2 Procesamiento Menos recursos

  1. Paquete de instalación
# 将 less 和 less-loader 下载到开发环境
npm install less less-loader --save-dev
  • less-loader: Responsable de compilar menos archivos en archivos CSS
  1. Agregue este cargador webpack.config.jsa
// 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. agregar archivossrc/less/index.less
.box2 {
  width: 100px;
  height: 100px;
  background-color: deeppink;
}

Modificar archivosmain.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));

Revisarpublic/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 Procesamiento de recursos Sass y Scss

  1. Paquete de instalación
# 将 sass sass-loader 下载到开发环境
npm i sass-loader sass -D
  • sass-loader: Responsable de compilar archivos Sass en archivos css
  • sass: sass-loaderDepende sassde la compilación
  1. Agregue este cargador webpack.config.jsa
// 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. agregar archivossrc/sass/index.sass
/* 可以省略大括号和分号 */
.box3
  width: 100px
  height: 100px
  background-color: hotpink

agregar archivossrc/sass/index.scss

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

Modificar archivosmain.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));

Revisarpublic/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. Ejecute el comando y abra index.htmlla página para ver el efecto.
npx webpack

2.4 Procesamiento de recursos Styl

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

stylus-loader: Responsable de compilar archivos Styl en archivos Css

  1. Agregue este cargador webpack.config.jsa
// 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. agregar archivossrc/styl/index.styl
/* 可以省略大括号、分号、冒号 */
.box 
  width 100px 
  height 100px 
  background-color pink

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

Revisarpublic/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. ejecutar comando
npx webpack

3. Recursos de imágenes de proceso

  • En el pasado, en Webpack4, procesamos recursos de imágenes a través de file-loaderyurl-loader
  • Ahora Webpack5 ha integrado dos funciones de cargador en Webpack: solo necesitamos una configuración simple para procesar recursos de imágenes.
// 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. Agregar recursos de imagen

    • src/images/1.jpeg

    • src/images/2.png

  2. Utiliza recursos de imágenes

    • 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. ejecutar comando

    npx webpack

    Abra la página index.html para ver el efecto.

3.1 Situación de los recursos de salida

Si observa el directorio dist en este momento, encontrará tres recursos de imágenes más, porque Webpack enviará todos los recursos empaquetados al directorio dist.

  • ¿Por qué no hay recursos de estilo?
    • Porque después style-loaderdel procesamiento, los recursos de estilo se empaquetan en main.js, por lo que no hay resultados adicionales.

3.2 Optimizar los recursos de imagen

Convierta imágenes de un tamaño menor a cierto tamaño en formato URI de datos (formato 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", // 开发模式
};

Ejecutarlo más tarde

npx webpack

De esta manera dist, el directorio solo tendrá imágenes de más de 10Kb, porque las imágenes de menos de 10kb serán procesadas por base64.

base64: convierte la imagen en una secuencia

  • Ventajas: Reducir el número de solicitudes
  • Desventajas: el volumen aumenta después de la conversión

4. Modifique el nombre y la ruta del recurso de salida.

De lo anterior podemos encontrar que los recursos empaquetados están concentrados en distel directorio, lo que será muy complicado. Queremos que las imágenes se empaqueten en la carpeta de imágenes, y si js está empaquetado en la carpeta js, ¿qué debemos hacer?

webpack.config.jsRealizar cambios en :

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

Insertar descripción de la imagen aquí

Luego borre la carpeta empaquetada dist, es decir, elimine distla carpeta y luego ejecute el siguiente comando

npx webpack

De esta manera, la carpeta empaquetada js se convierte en dist/static/jsy la carpeta empaquetada de imágenes se convierte enstatic/imgs

Revisarpublic/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. Borrar automáticamente los últimos recursos empaquetados

Borrar manualmente los recursos empaquetados es problemático, configurémoslo: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. Procesar recursos de iconos de fuentes

  1. Abra la biblioteca de iconos vectoriales de Alibaba
  2. Elija el icono que desee, agréguelo al carrito de compras, seleccione en el carrito de compras en la esquina superior derecha - Agregar al proyecto - Descargar al local
  3. Abrir la cremallera
  4. Copie .ttf、.woff、.woff2el archivo con el sufijo src/fontsen
  5. Copiar iconfont.cssbajo src/css_
    • Tenga en cuenta que es necesario modificar la ruta del archivo de fuente.

Insertar descripción de la imagen aquí

  1. src/main.jsCitar recursos en
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.htmlUtilice iconos de fuentes en
<!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>

¿Cómo usar el archivo de ícono de fuente aquí? Puede verificar el uso en el paquete descomprimido descargado demo_index.html. Estoy usando el uso de Font Css aquí.

Insertar descripción de la imagen aquí

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

type: "asset/resource"La diferencia entre y type: "asset":

  • type: "asset/resource"Equivale file-loadera convertir archivos en recursos que Webpack pueda reconocer y dejar el resto sin procesar.
  • type: "asset"Equivale url-loadera convertir archivos en recursos que Webpack pueda reconocer, y los recursos más pequeños que un cierto tamaño se procesarán en forma de URI de datos.
  1. ejecutar comando
npx webpack

Abra la página index.html para ver el efecto.

Supongo que te gusta

Origin blog.csdn.net/Augenstern_QXL/article/details/133049610
Recomendado
Clasificación
Diario
Más
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)

Code World

© 2018 codetd.com