前言:

加载资源处理webpack5自带的资源模块以外，我们还可以使用传统的loader进行资源的加载

资源文件（CSS and 字体）

src \ style.less

@color: #f9efd4;
body {
  color: @color;
  background: #999;
}
@font-face {
  font-family: 'iconfont';
  src: url(./asset/font.ttf) format('truetype');
}
.font-test {
  font-family: 'iconfont';
  font-size: 30px;
}

import "./style.css"

const span = document.createElement('span')
span.classList.add('font-test')
span.innerHTML = '本宫如此美丽，京让人以身相许'
document.body.appendChild(span)

1. 加载CSS/less资源

npm install —save-dev style-loader css-loader

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。 应保证 loader 的先后顺序：‘style-loader’ 在前，而 ‘css-loader’ 在后。如果不遵守此约定，webpack 可能会抛出错误

MiniCssExtractPlugin 会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件， 并且支持 CSS 和 SourceMaps 的按需加载。（取代style-loader）

const path = require("path")
const HtmlWebpackPulgin = require("html-webpack-plugin")

// 本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，
并且支持 CSS 和 SourceMaps 的按需加载。（取代style-loader）
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
// 这个插件使用 cssnano 优化和压缩 CSS
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
    ...
  // loader：通过loader我们也可以加载资源文件
  //  style-loader 和 css-loader，通过这两个我们可以实现CSS文件的加载
  module: {
    rules: [
      {
        // 加载CSS/less资源
        test: /\.(css|less)$/i,
        // use: ['style-loader', 'css-loader', 'less-loader'],
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
      },  
    ]
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin()
    ],
    minimize: true,
  }
}

2.加载字体资源

{
  // 加载字体资源
  test: /\.(woff|woff2|eot|ttf|otf)$/i,
  type: 'asset/resource',
},

最终效果

剩下的加载数据请看官网，步骤都一样

https://webpack.docschina.org/guides/asset-management/#loading-data