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

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

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

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

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

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

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

Это то, что я сделал для этого:

function requireAll(r) { r.keys().forEach(r); } requireAll(require.context('./modules/', true, /\.js$/)); 

В моем файле приложения я положил требование

 require.context( "./common", // context folder true, // include subdirectories /.*/ // RegExp )("./" + expr + "") 

любезность этого сообщения: https://github.com/webpack/webpack/issues/118

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

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

 // { // './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, /.*/)); 

это работает для меня:

 function requireAll(r) { r.keys().forEach(r); } requireAll(require.context('./js/', true, /\.js$/)); 

ПРИМЕЧАНИЕ. Это может потребовать файлы .js в поддиректорах ./js/ рекурсивно.

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

 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)); 
  • jQuery не определен в bootstrap-sass
  • Как сделать сервер webpack dev запущенным на порту 80 и 0.0.0.0, чтобы сделать его общедоступным?
  • Webpack ProvidePlugin vs externals?
  • Как создать несколько путей вывода в конфигурации Webpack
  • Webpack с использованием bootstrap - jquery не определен
  • Перемещение Webpack 4 CommonsChunkPlugin
  • Угловой 2 CLI огромный пакет поставщиков: как улучшить размер для prod?
  • Как отменить Angular 2 Cli ng-eject?
  • Давайте будем гением компьютера.