@arbz/glob-import-loader

A Webpack loader that enables glob imports for your project. With this loader, you can easily import multiple files matching a glob pattern and get an array of objects containing the module and its relative path.

Installation

1npm install @arbz/glob-import-loader

or

1yarn add @arbz/glob-import-loader

Usage

Add the loader to your Webpack configuration:

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.glob-import-allowed\.(js|mjs|jsx|ts|tsx)?$/,
6        loader: '@arbz/glob-import-loader',
7        enforce: 'pre',
8      },
9    ],
10  },
11};

Example

Given the following file structure:

src/
├── components/
│   ├── Header.jsx
│   ├── Footer.jsx
│   └── Sidebar.tsx

You can use the loader to import multiple files:

1import modules from './components/**/*.{jsx,tsx,ts}';
2
3console.log(modules);
4// Output:
5// [
6//   { module: Header, path: './Header.jsx' },
7//   { module: Footer, path: './Footer.jsx' },
8//   { module: Sidebar, path: './Sidebar.tsx' },
9// ]

Notes

• This loader supports only files with the .glob-import-allowed suffix by default (e.g., index.glob-import-allowed.js).
• The path property in the resulting array is the relative path from the glob import location.

License

This project is licensed under the MIT License.