Как я могу создать загрузчик для webpack, который предоставляет все исходники через функцию?

Question

Как я могу создать загрузчик для webpack, который предоставляет все исходники через функцию?

Я хотел бы иметь загрузчик, который собирает все источники css и позволяет мне получить все содержимое в функции. Вот так:

Webpack config

module: {

  loaders: [

    {test: /.css$/, loader: 'my-loader'}

  ]

}

JS файл A (foo.js)

import './foo.css';

JS файл B (bar.js)

import './bar.css';

JS файл C (app.js)

import './app.css';

import getAllCSSContents from 'my-loader';



const css = getAllCSSContents();

Где getAllCSSContents вернет все содержимое CSS из foo.css, bar.css и app.css

565 1

javascript webpack

1 ответ:

Comments

Ничего не найдено.

Decade Moon · Accepted Answer · 2017-07-13 13:31:01

Это немного сложно, потому что загрузчик, который вы хотите сделать, должен знать обо всех модулях CSS, прежде чем он сможет генерировать код, который он должен вернуть, делая его статусным (загрузчики предназначены для чистых функций, которые преобразуют один входной модуль).

Вы можете добиться того, чего хотите, используя raw-loader и еще require.context Вот так:
// Load all CSS files in the current directory and descendants
const context = require.context('!raw-loader!./', true, /\.css$/);
const cssFiles = {};

for (let filename of context.keys()) {
  cssFiles[filename] = context(filename);
}