Webpack 插件實作 CSS 樣式尺寸單位轉換

實作方式一

插件代碼

以下是撰寫的一個 Webpack 插件，用于將樣式檔案中以 rpx 為單位的值轉換為以 px 為單位的值（換算比率為 1px=2rpx）：

const pluginName = "CssSzieConvertPlugin";

class CssSzieConvertPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap(pluginName, (compilation) => {
      for (const chunk of compilation.chunks) {
        for (const file of chunk.files) {
          if (file.endsWith(".css")) {
            const originalSource = compilation.assets[file].source();
            const newSource = originalSource.replace(
              /\b(\d+(\.\d+)?)(rpx)\b/g,
              (match, number) => `${number / 2}px`
            );
            compilation.assets[file] = {
              source: () => newSource,
              size: () => newSource.length,
            };
          }
        }
      }
    });
  }
}

module.exports = CssSzieConvertPlugin;

上面的代碼創建了一個名為 CssSzieConvertPlugin 的插件類，該插件通過注冊到 Webpack 的 emit 鉤子上來處理樣式檔案，

在鉤子回呼函式中，首先遍歷所有的 chunk 和檔案，并檢查哪些檔案是 CSS 檔案，通過檢查檔案擴展名是否為 .css 來識別 CSS 檔案，

然后，獲取原始檔案的源代碼，并使用正則運算式 /\b(\d+(\.\d+)?)(rpx)\b/g 匹配所有以 rpx 為單位的數字，使用 replace 方法將每個匹配項替換為一個新的值，使用一個回呼函式，將匹配項中的數字除以 2，并將單位從 "rpx" 更改為 "px"，

最后，更新 compilation.assets 物件中的檔案源代碼和大小，以便 Webpack 可以使用更新后的檔案替換原始檔案，

使用代碼

在 Webpack 組態檔中使用這個插件，例如：

const CssSzieConvertPlugin = require("./CssSzieConvertPlugin");

module.exports = {
  // ...
  plugins: [
    new CssSzieConvertPlugin(),
    // ...
  ],
};

這將在 Webpack 構建程序中自動應用撰寫的插件，并將樣式檔案中的 rpx 值轉換為 px 值，

實作方式二

插件代碼

以下是撰寫的另一個 Webpack 插件，用于將樣式檔案中以 rpx 為單位的值轉換為以 px 為單位的值（換算比率為 1px=2rpx）：

const pluginName = "CssSzieConvertPlugin";

class CssSzieConvertPlugin {
  constructor(options) {
    this.options = options || {};
  }

  apply(compiler) {
    compiler.hooks.emit.tapAsync(pluginName, (compilation, callback) => {
      const { test = /\.css$/, exclude = /node_modules/ } = this.options;
      const files = Object.keys(compilation.assets).filter(
        (filename) => test.test(filename) && !exclude.test(filename)
      );

      files.forEach((file) => {
        let source = compilation.assets[file].source();

        // 使用正則運算式匹配所有以 rpx 為單位的數字
        if (source.replace) {
          // 解決 TypeError: source.replace is not a function 問題

          source = source.replace(
            /\b(\d+(\.\d+)?)(rpx)\b/g,
            (match, p1) => `${p1 / 2}px`
          );
        }

        // 更新編譯后的代碼
        compilation.assets[file] = {
          source: () => source,
          size: () => source.length,
        };
      });

      callback();
    });
  }
}

module.exports = CssSzieConvertPlugin;

該插件類名為 CssSzieConvertPlugin，建構式接受一個選項物件作為引數，該選項物件包含兩個屬性：test 和 exclude，它們分別表示要處理的檔案型別和要排除的檔案，默認情況下，test 屬性為 /\css$/，exclude 屬性為 /node_modules/，

在 apply 方法中，使用 Webpack 的 emit 鉤子來處理樣式檔案，首先使用選項中的正則運算式來過濾要處理的檔案，然后遍歷這些檔案并對它們的源代碼進行處理，

對于每個檔案，使用正則運算式 /\b(\d+(\.\d+)?)(rpx)\b/g 匹配所有以 rpx 為單位的數字，并將每個匹配項替換為該數字除以 2 的結果，最后，更新編譯后的代碼，并將更新后的源代碼和大小存盤在 compilation.assets 物件中，

使用代碼

在 Webpack 組態檔中使用這個插件，例如：
```
const CssSzieConvertPlugin = require("./CssSzieConvertPlugin");

module.exports = {
  // ...
  plugins: [
    new CssSzieConvertPlugin({
      test: /\.wxss/,
      exclude: /node_modules/,
    }),
    // ...
  ],
};
```
這將在 Webpack 構建程序中自動應用撰寫的插件，并將樣式檔案中的 rpx 值轉換為 px 值，在上面的示例中，指定了要處理的檔案型別為 .wxss 檔案，并排除了 node_modules 目錄中的檔案，

在基于 Webpack 構建工具的 Vue 專案中配置，例如：

// vue.config.js
const CssSzieConvertPlugin = require("./CssSzieConvertPlugin");

module.exports = {
  configureWebpack: {
    plugins: [
      new CssSzieConvertPlugin({
        test: /\.(css|js|html)/,
        exclude: /node_modules/,
      }),
    ],
  },
};

作者：飛仔FeiZai

出處：https://www.cnblogs.com/yuzhihui/p/17463475.html

宣告：歡迎任何形式的轉載，但請務必注明出處！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/554612.html

標籤：其他

上一篇：【前端方案】-表格排序列LRU快取方案

下一篇：返回列表