Как загрузить все файлы в каталог с помощью webpack без инструкций require

Question

Как загрузить все файлы в каталог с помощью webpack без инструкций require

У меня есть большое количество файлов javascript, разделенных на 4 подкаталога в моем приложении. В грунт я беру их все и собирать их в один файл. Эти файлы не имеют модуля.функция экспорта.

Я хочу использовать webpack и разделить его на 4 части. Я не хочу вручную входить и требовать все мои файлы.

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

Я хочу, чтобы все файлы в каждом каталоге были скомпилированы в модуль, который я мог бы затем потребовать от моего файла точки входа или включить в активы, которые http://webpack.github.io/docs/plugins.html упоминает.

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

есть ли способ сделать это с помощью webpack или плагина, который кто-то написал, чтобы сделать это?

579 5

javascript webpack build

5 ответов:

Comments

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

splintor · Accepted Answer · 2015-06-04 22:08:17

вот что я сделал, чтобы добиться этого:
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./modules/', true, /\.js$/));

ChickenFur · Accepted Answer · 2016-09-29 20:01:20

в моем файле приложения я закончил тем, что поставил require
require.context(
  "./common", // context folder
  true, // include subdirectories
  /.*/ // RegExp
)("./" + expr + "")
любезно предоставлено этим сообщением:https://github.com/webpack/webpack/issues/118

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

Steven de Salas · Accepted Answer · 2017-05-11 07:21:35

Как насчет карты всех файлов в папке?

// { 
//   './image1.png':  'data:image/png;base64,iVBORw0KGgoAAAANS',
//   './image2.png':  'data:image/png;base64,iVBP7aCASUUASf892',
// }

этого:

const allFiles = (ctx => {
    let keys = ctx.keys();
    let values = keys.map(ctx);
    return keys.reduce((o, k, i) => { o[k] = values[i]; return o; }, {});
})(require.context('./path/to/folder', true, /.*/));

jack long · Accepted Answer · 2017-10-07 18:29:05

это работает для меня :
function requireAll(r) { r.keys().forEach(r); } 

requireAll(require.context('./js/', true, /\.js$/));
Примечание: это может потребоваться .JS файлы в подкаталоги из ./ js / рекурсивно.

Alex K · Accepted Answer · 2018-06-12 00:24:57

пример как получить карту всех изображений в текущей папке.

const IMAGES_REGEX = /\.(png|gif|ico|jpg|jpeg)$/;

function mapFiles(context) {
  const keys = context.keys();
  const values = keys.map(context);
  return keys.reduce((accumulator, key, index) => ({
    ...accumulator,
    [key]: values[index],
  }), {});
}

const allImages = mapFiles(require.context('./', true, IMAGES_REGEX));