• webpack之处理字体图标资源和打包其他资源

    1.下载图标地址

    iconfont-阿里巴巴矢量图标库

    2.添加字体图标资源（按照网站要求将资源等引入使用）

    • src/fonts/iconfont.ttf

    • src/fonts/iconfont.woff

    • src/fonts/iconfont.woff2

    • src/css/iconfont.css

      • 注意字体文件路径需要修改

    • src/main.js

      1. import { add } from "./math";
      2. import count from "./js/count";
      3. import sum from "./js/sum";
      4. // 引入资源，Webpack才会对其打包
      5. import "./css/iconfont.css";
      6. import "./css/index.css";
      7. import "./less/index.less";
      8. import "./sass/index.sass";
      9. import "./sass/index.scss";
      10. import "./styl/index.styl";
      11.  
      12. console.log(count(2, 1));
      13. console.log(sum(1, 2, 3, 4));

    • public/index.html 
      1. <!DOCTYPE html>
      2. <html lang="en">
      3.   <head>
      4.     <meta charset="UTF-8" />
      5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7.     <title>webpack5</title>
      8.   </head>
      9.   <body>
      10.     <h1>Hello Webpack5</h1>
      11.     <div class="box1"></div>
      12.     <div class="box2"></div>
      13.     <div class="box3"></div>
      14.     <div class="box4"></div>
      15.     <div class="box5"></div>
      16.     <!-- 使用字体图标 -->
      17.     <i class="iconfont icon-arrow-down"></i>
      18.     <i class="iconfont icon-ashbin"></i>
      19.     <i class="iconfont icon-browse"></i>
      20.     <script src="../dist/static/js/main.js"></script>
      21.   </body>
      22. </html>

       

    3.配置

    1.       {
    2.         test: /\.(ttf|woff2?)$/,
    3.         type: "asset/resource",
    4.         generator: {
    5.           filename: "static/media/[hash:8][ext][query]",
    6.         },
    7.       }
    1. const path = require("path");
    2.  
    3. module.exports = {
    4.   entry: "./src/main.js",
    5.   output: {
    6.     path: path.resolve(__dirname, "dist"),
    7.     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    8.     clean: true, // 自动将上次打包目录资源清空
    9.   },
    10.   module: {
    11.     rules: [
    12.       {
    13.         // 用来匹配 .css 结尾的文件
    14.         test: /\.css$/,
    15.         // use 数组里面 Loader 执行顺序是从右到左
    16.         use: ["style-loader", "css-loader"],
    17.       },
    18.       {
    19.         test: /\.less$/,
    20.         use: ["style-loader", "css-loader", "less-loader"],
    21.       },
    22.       {
    23.         test: /\.s[ac]ss$/,
    24.         use: ["style-loader", "css-loader", "sass-loader"],
    25.       },
    26.       {
    27.         test: /\.styl$/,
    28.         use: ["style-loader", "css-loader", "stylus-loader"],
    29.       },
    30.       {
    31.         test: /\.(png|jpe?g|gif|webp)$/,
    32.         type: "asset",
    33.         parser: {
    34.           dataUrlCondition: {
    35.             maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
    36.           },
    37.         },
    38.         generator: {
    39.           // 将图片文件输出到 static/imgs 目录中
    40.           // 将图片文件命名 [hash:8][ext][query]
    41.           // [hash:8]: hash值取8位
    42.           // [ext]: 使用之前的文件扩展名
    43.           // [query]: 添加之前的query参数
    44.           filename: "static/imgs/[hash:8][ext][query]",
    45.         },
    46.       },
    47.       {
    48.         test: /\.(ttf|woff2?)$/,
    49.         type: "asset/resource",
    50.         generator: {
    51.           filename: "static/media/[hash:8][ext][query]",
    52.         },
    53.       },
    54.     ],
    55.   },
    56.   plugins: [],
    57.   mode: "development",
    58. };

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

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

    4.运行

    npx webpack

    5.处理其他资源

    开发当中还可能有一些特殊资源例如说视频等资源，那么可以配置以下信息，最后再运行webpack打包文件

    1.       {
    2.         test: /\.(ttf|woff2?|map4|map3|avi)$/,
    3.         type: "asset/resource",
    4.         generator: {
    5.           filename: "static/media/[hash:8][ext][query]",
    6.         }
    1. const path = require("path");
    2.  
    3. module.exports = {
    4.   entry: "./src/main.js",
    5.   output: {
    6.     path: path.resolve(__dirname, "dist"),
    7.     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    8.     clean: true, // 自动将上次打包目录资源清空
    9.   },
    10.   module: {
    11.     rules: [
    12.       {
    13.         // 用来匹配 .css 结尾的文件
    14.         test: /\.css$/,
    15.         // use 数组里面 Loader 执行顺序是从右到左
    16.         use: ["style-loader", "css-loader"],
    17.       },
    18.       {
    19.         test: /\.less$/,
    20.         use: ["style-loader", "css-loader", "less-loader"],
    21.       },
    22.       {
    23.         test: /\.s[ac]ss$/,
    24.         use: ["style-loader", "css-loader", "sass-loader"],
    25.       },
    26.       {
    27.         test: /\.styl$/,
    28.         use: ["style-loader", "css-loader", "stylus-loader"],
    29.       },
    30.       {
    31.         test: /\.(png|jpe?g|gif|webp)$/,
    32.         type: "asset",
    33.         parser: {
    34.           dataUrlCondition: {
    35.             maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
    36.           },
    37.         },
    38.         generator: {
    39.           // 将图片文件输出到 static/imgs 目录中
    40.           // 将图片文件命名 [hash:8][ext][query]
    41.           // [hash:8]: hash值取8位
    42.           // [ext]: 使用之前的文件扩展名
    43.           // [query]: 添加之前的query参数
    44.           filename: "static/imgs/[hash:8][ext][query]",
    45.         },
    46.       },
    47.       {
    48.         test: /\.(ttf|woff2?|map4|map3|avi)$/,
    49.         type: "asset/resource",
    50.         generator: {
    51.           filename: "static/media/[hash:8][ext][query]",
    52.         },
    53.       },
    54.     ],
    55.   },
    56.   plugins: [],
    57.   mode: "development",
    58. };

  • 相关阅读:
    【MySQL】主从复制（两台服务器）
    Python爬虫被封ip的解决方案
    python之计算市场技术指标
    STM32智能物流机器人系统教程
    建立自己的网站（14）
    揭秘计算机奇迹：探索I/O设备的神秘世界！
    vue2，props属性和attribute属性的区别和不同
    100行代码教你写个卡牌翻翻乐小游戏
    Linux基础（四）
    spring cloud alibaba 简介
  • 原文地址：https://blog.csdn.net/m0_68997646/article/details/127633924