使用 Webpack5 在 CSS 文件中内联字体和图像

我找到了一个解决方案，它不是真正通用的或可靠的，但至少在我的 case 场景中可以做到这一点.

导入与固定的源路径相关，因此我们的 idea 是读取在url()个规则中找到的资源，并在base64编码中将其作为DataURI进行处理.

我发现使用datauri非常有用，它提供了一种方法，可以像外部资源一样在线包含数据，并自动管理模拟类型.

npm install datauri --save

然后，我不得不修改webpack.config.js中的生成器处理程序，以利用datauri包手动处理资源.

const path = require("path");
const Datauri = require("datauri/sync");

const EXTERNAL_ROOT_PATH = "./src/external/dev/";

module.exports = {
  ...

  module: {
    rules: [
       {
        test: /\.css$/i,
        type: "asset/inline",
        generator: {
          dataUrl: (content) => {
            content = content.toString();

            // Get the resource paths inside the CSS url() rules
            let asset_urls = [];
            let match,
              regex = /url\((.*?)\)/gi;
            while ((match = regex.exec(content))) {
              asset_urls.push(match[1]);
            }
            // console.log(asset_urls);

            // Convert the resource to a DataURI and replace it inside url()
            asset_urls.forEach((file_path) => {
              // Sanitize the file path first
              sanitized_file_path = file_path.replace(/[\"\']/g, "").replace(/^(?:\.\.\/)+/, "");

              const data_uri = Datauri(path.join(EXTERNAL_ROOT_PATH, sanitized_file_path));
              // console.log(data_uri.content); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
              // console.log(data_uri.mimetype); //=> "image/png"
              // console.log(data_uri.base64); //=> "iVBORw0KGgoAAAANSUhEUgAA..."
              // console.log(data_uri.buffer); //=> file buffer

              content = content.replace(file_path, data_uri.content);
            });

            return "data:text/css;base64," + Buffer.from(content).toString("base64");
          },
        },
      },
    ],
  },
};