webpack-extended-import-glob-loader

Expands globbing patterns for ES6 import statements (as preloader for Webpack) .

This is a fork of https://github.com/fred104/import-glob. In comparison to the original project this loader is exposing the imported modules together with its file name. This allows to process the individually found module to be handled in respect to its file name. A possible usecase could be to extract a key from the filename as identifier for the content of dynamically imported JSON files.

---

1import modules from "./foo/**/*.js";

Expands into

1import * as module0 from "./foo/1.js";
2import * as module1 from "./foo/bar/2.js";
3import * as module2 from "./foo/bar/3.js";
4
5const modules = [
6  {fileName: "./foo/1.js", module: module0},
7  {fileName: "./foo/bar/2.js", module: module1},
8  {fileName: "./foo/bar/3.js", module: module2}];

---

For importing from node module

1import modules from "a-node-module/**/*js";

Expands into

1import * as module0 from "a-node-module/foo/1.js";
2import * as module1 from "a-node-module/foo/bar/2.js";
3import * as module2 from "a-node-module/foo/bar/3.js";
4
5const modules = [module0, module1, module2]

---

For side effects:

1import "./foo/**/*.scss";

Expands into

1import "./foo/1.scss";
2import "./foo/bar/2.scss";

---

For sass:

1@import "./foo/**/*.scss";

Expands into

1@import "./foo/1.scss";
2@import "./foo/bar/2.scss";

---

Install

1npm install webpack-import-glob-loader --save-dev

Usage

You can use it one of two ways, the recommended way is to use it as a preloader

1// ./webpack.config.js
2
3module.exports = {
4  ...
5  module: {
6    rules: [
7      {
8          test: /\.js$/,
9          use: 'webpack-extended-import-glob-loader'
10      },
11      {
12          test: /\.scss$/,
13          use: 'webpack-extended-import-glob-loader'
14      },
15    ]
16  }
17};

Alternatively you can use it as a chained loader

1// foo/bar.js
2import "./**/*.js";
3
4// index.js
5import 'webpack-extended-import-glob-loader!foo/bar.js';