Плагин Webpack: генерировать модуль CSS для обработки плагинами Post CSS - PullRequest
0 голосов
/ 19 января 2020

Я работаю над плагином Webpack, который должен излучать модуль CSS, который затем может быть обработан, как и все другие CSS модули. В приведенном ниже примере я получил очень простую версию этой работы, добавив ресурс в компиляцию, но это обходит такие вещи, как минификация или плагины Post CSS.

const battery = require('@battery/core');

class BatteryWebpackPlugin {
  constructor(options) {
    this.cacheObject = {};
    this.pluginName = 'battery-webpack-plugin';
    this.distillClassNames = this.distillClassNames.bind(this);
    this.config = options.config;
  }

  distillClassNames(obj) {
    return Object.keys(obj)
      .map(x => obj[x])
      .reduce((xs, x) => xs.concat(x), []);
  }

  apply(compiler) {
    compiler.hooks.compilation.tap(this.pluginName, compilation => {
      compilation.hooks.normalModuleLoader.tap(this.pluginName, loaderCtx => {
        loaderCtx[this.pluginName] = {
          addClassNames: (resourcePath, classNamesArr) => {
            this.cacheObject[resourcePath] = classNamesArr;
          }
        };
      });
    });

    compiler.hooks.emit.tap(this.pluginName, (compilation, callback) => {
      const fileContent = battery.generateCSS(
        this.distillClassNames(this.cacheObject),
        this.config
      );

      compilation.assets['battery.css'] = {
        source: () => fileContent,
        size: () => fileContent.length
      };

      if (callback) {
        callback();
      }
    });
  }
}

BatteryWebpackPlugin.loader = require.resolve('./loader.js');

module.exports = BatteryWebpackPlugin;

Кажется, что есть способ создания модуля CSS, но, читая документы, я не могу найти пример этого, и я просто совершенно потерял, пытаясь прочитать исходный текст Webpack, чтобы понять, как можно добиться чего-то подобного.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...