643 webpack加载和处理其他资源：file-loader，asset module type，加载字体文件

案例准备

file-loader

文件的名称规则

设置文件名称

设置文件的存放路径

url-loader

url-loader的limit

目录结构

wk.config.js

const path = require('path');

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    // 必须是一个绝对路径
    path: path.resolve(__dirname, "./build")
  },
  module: {
    rules: [
      {
        // 规则使用正则表达式
        test: /\.css$/, // 匹配资源
        use: [
          // { loader: "css-loader" },
          // 注意: 编写顺序(从下往上, 从右往做, 从后往前)
          "style-loader", 
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          "postcss-loader"
        ],
        // loader: "css-loader"
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 打包到img目录下，保留文件名、6位哈希、扩展名，连接符除了句点，还可以用-等
              // 效果等同于outputpath，但是这种写法更常用
              name: "img/[name].[hash:6].[ext]",
              limit: 100 * 1024 // 100kb以下的图片
            }
          }
        ]
      }
    ]
  }
}

asset module type的介绍

Asset module type的使用

url-loader的limit效果

加载字体文件

字体的打包

目录结构

wk.config.js

const path = require('path');

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    // 必须是一个绝对路径
    path: path.resolve(__dirname, "./build"),
    // assetModuleFilename: "img/[name].[hash:6][ext]"
  },
  module: {
    rules: [
      {
        // 规则使用正则表达式
        test: /\.css$/, // 匹配资源
        use: [
          // { loader: "css-loader" },
          // 注意: 编写顺序(从下往上, 从右往做, 从后往前)
          "style-loader", 
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          "postcss-loader"
        ],
        // loader: "css-loader"
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        // type: "asset/resource", file-loader的效果
        // type: "asset/inline", url-loader的效果
        type: "asset",
        generator: {
          filename: "img/[name].[hash:6][ext]"
        },
        // 是parser，不是parse
        parser: {
          dataUrlCondition: {
            // 是maxSize，不再是limit
            maxSize: 100 * 1024
          }
        }
      },
      {
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash:6][ext]"
        }
      }
    ]
  }
}

index.html

注意，index.html中要使用字体图标，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>Document</title>
</head>
<body>
  <script src="./build/bundle.js"></script>
  <!-- 注意，index.html中要使用字体图标，html代码要写在打包后的资源文件后面 -->
  <div class="iconfont icon-caps-lock"></div>
  <div class="iconfont icon-ashbin"></div>
  <div class="iconfont icon-caps-lock"></div>
</body>
</html>