Я работаю над плагином 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, чтобы понять, как можно добиться чего-то подобного.