Resumo do uso básico do WebPack5 (1)

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

Resumo do uso básico do WebPack5

Vídeo de suporte: Introdução ao Webpack 5 em Shang Silicon Valley
Código de suporte: https://gitee.com/Augenstern-creator/kuang-study-web-pack5
Insira a descrição da imagem aqui

1、WebPack

WebpackÉ uma ferramenta de empacotamento de recursos estáticos.

  • Ele usará um ou mais arquivos como ponto de entrada para empacotamento, compilará e combinará todos os arquivos de todo o nosso projeto em um ou mais arquivos e os produzirá.
  • O arquivo de saída é o arquivo compilado e pode ser executado na seção do navegador.
  • Chamamos Webpacko arquivo de saída bundle.

O próprio Webpack tem funcionalidade limitada:

  • ES ModuleModo de desenvolvimento: somente sintaxe em JS pode ser compilada
  • Modo de produção: pode compilar sintaxe em JS ES Modulee compactar código JS

1.1. Comece a usar

  1. O diretório de recursos é o seguinte
01_HelloWebpack # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件
  1. O conteúdo do arquivo em js é o seguinte
  • 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 o terminal e vá para o diretório raiz do projeto. Execute o seguinte comando:
# 初始化 package.json
npm init -y

Um arquivo básico package.jsonserá gerado neste ponto. Deve-se observar que package.jsono namecampo do meio não pode ser chamado webpack, caso contrário um erro será relatado na próxima etapa.

  1. Baixe WebPack-cli para dependências de desenvolvimento
npm i webpack webpack-cli -D
  1. habilitar webpack
# 开发模式
npx webpack ./src/main.js --mode=development

# 生产模式
npx webpack ./src/main.js --mode=production
  • npmEle é usado para baixar pacotes e npxadicionará temporariamente o diretório bin em node_modules como uma variável de ambiente, para que aplicativos que possam acessar as variáveis ​​de ambiente, como webpack
    • npx webpack: é usado para executar Webpackpacotes de instalação local
  • webpack usará um arquivo ou vários arquivos como ponto de entrada
    • ./src/main.js: Especifique para iniciar o empacotamento Webpacka partir main.jsdo arquivo. Ele não apenas será empacotado main.js, mas suas dependências também serão empacotadas juntas.
  • --mode=xxx:Especificar modo (ambiente)
  1. Observe o arquivo de saída

Por padrão, Webpackos arquivos serão empacotados e enviados para disto diretório. Podemos distapenas verificar os arquivos no diretório.

Perceber:

  • WebpackTem relativamente poucas funções e só pode lidar com jsrecursos. Ao encontrar cssoutros recursos, como , um erro será relatado.
  • Então quando estudamos Webpackaprendemos principalmente como lidar com outros recursos

1.2. Configuração básica

Primeiro, familiarize-se com os cinco conceitos básicos do WebPack:

  1. entry:Entrada
    • Instrua o Webpack de qual arquivo iniciar o empacotamento
  2. output:saída
    • Instrua o Webpack onde gerar os arquivos compactados, como nomeá-los, etc.
  3. loader: Carregador
    • O próprio webpack só pode lidar com js, json e outros recursos, outros recursos precisam usar o carregador
  4. plugins:Plugar
    • Estendendo a funcionalidade do Webpack
  5. mode: modelo
    • Modo de desenvolvimento: desenvolvimento
    • Modo de produção: produção

Criamos um novo arquivo no diretório raiz do projeto webpack.config.js, da seguinte forma:

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

Como o webpack está configurado neste momento, você só precisa executar o webpack empacotado neste momento:

npx webpack

O Webpack será webpack.config.jsconfigurado por meio de arquivos no futuro para aprimorar a funcionalidade do Webpack

2. Recursos de estilo de processo

  • O próprio Webpack não pode reconhecer recursos de estilo, então precisamos usar o Loader para ajudar o Webpack a analisar os recursos de estilo.

  • Neste capítulo, aprendemos como usar o Webpack para processar recursos de estilo Css, Less, Sass, Scss e Styl

  • Quando procuramos um Loader, devemos encontrar o Loader correspondente na documentação oficial e então usá-lo.Se não conseguirmos encontrar a documentação oficial, podemos pesquisá-la na comunidade Github.

Carregadores | documentação chinesa do webpack (docschina.org)

2.1. Processamento de recursos CSS

Insira a descrição da imagem aqui

  1. Primeiro instale css-loaderestyle-loader
# 把 css-loader、style-loader 加入开发依赖
npm i css-loader style-loader -D
  • css-loader: Responsável por compilar arquivos CSS em módulos que o Webpack possa reconhecer
  • style-loader: Será criada dinamicamente uma tag Style, que conterá o conteúdo do módulo Css no Webpack.

Neste ponto, o estilo entrará em vigor na página na forma de uma tag Style.

  1. Configuraçãowebpack.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. adicionar àsrc/css/index.css
.box1 {
    
    
  width: 100px;
  height: 100px;
  background-color: pink;
}

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

adicionar à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. Execute o comando e abra index.htmla página para ver o efeito
npx webpack

2.2. Processando menos recursos

  1. Pacote de instalação
# 将 less 和 less-loader 下载到开发环境
npm install less less-loader --save-dev
  • less-loader: Responsável por compilar Menos arquivos em arquivos CSS
  1. Adicione este carregador 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. adicionar arquivossrc/less/index.less
.box2 {
  width: 100px;
  height: 100px;
  background-color: deeppink;
}

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

Reverpublic/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. Processando recursos Sass e Scss

  1. Pacote de instalação
# 将 sass sass-loader 下载到开发环境
npm i sass-loader sass -D
  • sass-loader: Responsável por compilar arquivos Sass em arquivos css
  • sass: sass-loaderDepende sassda compilação
  1. Adicione este carregador 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. adicionar arquivossrc/sass/index.sass
/* 可以省略大括号和分号 */
.box3
  width: 100px
  height: 100px
  background-color: hotpink

adicionar arquivossrc/sass/index.scss

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

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

Reverpublic/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. Execute o comando e abra index.htmla página para ver o efeito
npx webpack

2.4. Processando recursos de estilo

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

stylus-loader: Responsável por compilar arquivos Styl em arquivos CSS

  1. Adicione este carregador 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. adicionar arquivossrc/styl/index.styl
/* 可以省略大括号、分号、冒号 */
.box 
  width 100px 
  height 100px 
  background-color pink

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

Reverpublic/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. comando de execução
npx webpack

3. Processar recursos de imagem

  • No passado, no Webpack4, processávamos recursos de imagem por meio file-loadereurl-loader
  • Agora o Webpack5 incorporou duas funções Loader no Webpack, precisamos apenas de uma configuração simples para processar recursos de imagem.
// 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. Adicione recursos de imagem

    • src/images/1.jpeg

    • src/images/2.png

  2. Use recursos de imagem

    • 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. comando de execução

    npx webpack

    Abra a página index.html para ver o efeito

3.1. Situação dos recursos de saída

Se você olhar o diretório dist neste momento, encontrará mais três recursos de imagem, porque o Webpack enviará todos os recursos empacotados para o diretório dist.

  • Por que não há recursos de estilo?
    • Porque após style-loadero processamento, os recursos de estilo são empacotados em main.js, portanto não há saída adicional.

3.2. Otimize recursos de imagem

Converta imagens menores que um determinado tamanho em formato URI de dados (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", // 开发模式
};

Execute mais tarde

npx webpack

Desta forma dist, o diretório só terá imagens maiores que 10Kb, pois imagens menores que 10kb serão processadas por base64

base64: Converta a imagem em uma sequência

  • Vantagens: Reduza o número de solicitações
  • Desvantagens: o volume aumenta após a conversão

4. Modifique o nome e o caminho do recurso de saída

Pelo exposto, podemos descobrir que os recursos empacotados estão concentrados no distdiretório, o que será muito confuso. Queremos que as imagens sejam empacotadas na pasta de imagens, e o que devemos fazer se js estiver empacotado na pasta js?

webpack.config.jsFaça alterações em :

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

Insira a descrição da imagem aqui

Em seguida, limpe a pasta empacotada dist, ou seja dist, exclua a pasta e execute o seguinte comando

npx webpack

Dessa forma, a pasta empacotada js se torna dist/static/js, e a pasta empacotada com imagens se tornastatic/imgs

Reverpublic/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. Limpe automaticamente os últimos recursos empacotados

Limpar manualmente os recursos empacotados é problemático. Vamos configurá-lo: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. Processar recursos de ícones de fontes

  1. Abra a biblioteca de ícones vetoriais do Alibaba
  2. Escolha o ícone que você gosta, adicione-o ao carrinho de compras, selecione no carrinho de compras no canto superior direito - Adicionar ao projeto - Baixar para local
  3. Descompactar
  4. Copie .ttf、.woff、.woff2o arquivo com sufixo src/fontspara
  5. Copie iconfont.cssem src/css_
    • Observe que o caminho do arquivo de fonte precisa ser modificado

Insira a descrição da imagem aqui

  1. src/main.jsCitar recursos em
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.htmlUse ícones de fonte em
<!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>

Como usar o arquivo do ícone da fonte aqui? Você pode verificar o uso no pacote descompactado baixado demo_index.html. Estou usando o uso do Font Css aqui.

Insira a descrição da imagem aqui

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

type: "asset/resource"A diferença entre e type: "asset":

  • type: "asset/resource"Equivale file-loadera converter arquivos em recursos que possam ser reconhecidos pelo Webpack e deixar o restante sem processar.
  • type: "asset"Equivalente url-loadera converter arquivos em recursos que o Webpack pode reconhecer, e recursos menores que um determinado tamanho serão processados ​​no formato URI de dados
  1. comando de execução
npx webpack

Abra a página index.html para ver o efeito

Acho que você gosta

Origin blog.csdn.net/Augenstern_QXL/article/details/133049610
Recomendado
Clasificación
Diario
Más
2024-05-28(0)
2024-05-27(0)
2024-05-26(0)
2024-05-25(0)
2024-05-24(11)
2024-05-23(35)
2024-05-22(9)
2024-05-21(34)
2024-05-20(5)
2024-05-19(0)

Code World

© 2018 codetd.com