Import multiple files in folder in React / Nextjs

问题

I'm trying to import multiple files with a certain extension in a folder:

const allEntries = require.context('../static/blog', true, '/\.md/')

but I'm getting:

Unhandled Rejection (TypeError): __webpack_require__(...).context is not a function

I'm using Nextjs and require the files in one of the pages. Something seems off here?

Edit: I don't necessarily need to do it via require I just want to be able to import/require multiple files at once without knowing the filename or how many of the files are in a folder.

回答1:

You can give the following a try in webpack:

const glob = require('glob');
const allEntries = glob.sync("../static/blog/*.md"); 

The glob will return an array of files. The array will contain all files with .md extension in the ../static/blog/ folder. Eventough there is a package it shouldn't be required to install the package.

回答2:

Try using require context npm library.

$ npm i --save require-context

In your file:

// Load globally into all modules.
require('require-context/register')

// Load locally as a function.
var requireContext = require('require-context');


function requireAll(r) { r.keys().forEach(r); } 

requireAll(requireContext('../static/blog', true, /\.md$/));

回答3:

From what I understand you are very close, from the error you are using webpack's require.context

const allEntries = require.context('../static/blog', true, '/\.md/')
console.log(allEntries.keys()) // all the files found in the context
allEntries.keys().forEach(allEntries) // require them all

来源：https://stackoverflow.com/questions/52755685/import-multiple-files-in-folder-in-react-nextjs