glob-import-loader
Webpack loader that enables ES6 imports with glob patterns. Leverages Webpack's Enhanced Resolver to resolve aliases.
Inspired by webpack-import-glob-loader
Known Issues
-
?,+, and!globbing characters have issues as they're currently incompatible with Enhanced Loader. Looking for workarounds!
Notes on Sass's @use and @forward
@use's configuration syntax (with) and @forward's configuration syntax (hide) is not supported and will be ignored. These should not be added in a wildcard fashion and should instead be set individually on each module.
import modules from "./foo/**/*.js";Expands into
import * as module0 from "./foo/1.js";
import * as module1 from "./foo/bar/2.js";
import * as module2 from "./foo/bar/3.js";
var modules = [module0, module1, module2];For importing from node module
import modules from "a-node-module/**/*js";Expands into
import * as module0 from "a-node-module/foo/1.js";
import * as module1 from "a-node-module/foo/bar/2.js";
import * as module2 from "a-node-module/foo/bar/3.js";
var modules = [module0, module1, module2];For side effects:
import "./foo/**/*.scss";Expands into
import "./foo/1.scss";
import "./foo/bar/2.scss";For sass:
@import "./foo/**/*.scss";Expands into
@import "./foo/1.scss";
@import "./foo/bar/2.scss";@use "./foo/**/*.scss" as *;Expands into
@use "./foo/1.scss" as *;
@use "./foo/bar/2.scss" as *;@forward "./foo/**/*.scss" as C;Expands into
@forward "./foo/1.scss" as C0;
@forward "./foo/bar/2.scss" as C1;Install
npm install glob-import-loader --save-devUsage
You can use it one of two ways, the recommended way is to use it as a preloader
// ./webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /\.js$/,
use: 'glob-import-loader'
},
{
test: /\.scss$/,
use: 'glob-import-loader'
},
]
}
};Alternatively you can use it as a chained loader
// foo/bar.js
import "./**/*.js";
// index.js
import "glob-import-loader!foo/bar.js";Options
| Name | Type | Default | Description |
|---|---|---|---|
resolve |
{Object} |
{} |
Your Webpack resolution (resolve) rules. |
banner |
{Function} |
undefined |
An optional function for how wildcard variables should display. Useful for things such as HMR Where names must be predictable. |
ignoreNodeModules |
{Boolean} |
true* |
Determines whether files under node_modules should be ignored. By default, they are ignored unless "node_modules" is present in the glob string. |
resolve
Type: Object
Default: {} (or default webpack resolution rules)
This object should reference your resolution object in your webpack.config.js configuration.
Example:
webpack.config.js
const resolve = {
alias: {
Sprite: path.resolve(__dirname, "src/assets/sprite"),
CSS: path.resolve(__dirname, "src/css"),
JS: path.resolve(__dirname, "src/js"),
},
modules: [path.resolve(__dirname, "node_modules")],
extensions: [".js", ".jsx", ".ts", ".tsx", ".json"],
plugins: [new DirectoryNamedWebpackPlugin(true)],
};
module.exports = {
target: 'web',
resolve,
entry: { ... }
module: {
rules: [
{
test: /\.(j|t)sx?$/,
include: [path.resolve(__dirname, 'src')],
use: [
'babel-loader',
{
loader: 'glob-import-loader',
options: {
resolve,
},
},
],
},
],
},
... other settings ...
};
banner
Type: Function
Default: undefined
This function gives you granular control over how "import" variables are output in the code should you need it. Can be useful when needing predictable variable names, such as with HMR. The banner function should return serialized JavaScript. The banner function receives two arguments:
-
paths- An array of objects with the following structure:Name Description pathThe path to the imported file. moduleVariable reference to the value exported by the file. importStringThe import string use by Webpack to import the file -
varname- The variable name used when importing.
banner Example:
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(j|t)sx?$/,
include: [path.resolve(__dirname, "src")],
use: [
"babel-loader",
{
loader: "glob-import-loader",
options: {
banner(paths, varname) {
if (varname) {
return `var ${varname} = {${paths
.map(
({ path: fn, module }) => `
"${path.basename(fn).split(".")[0]}":${module}
`
)
.join(",")}};`;
}
},
},
},
],
},
],
},
};entry.js (source)
import cmpts from "JS/**/*.cmpt.jsx";entry.js (output)
... webpack import statements ...
// output via `banner` function
var cmpts = {
"loader": _webpack_path_to_module__,
"autocomplete": _webpack_path_to_module__,
"searchresults": _webpack_path_to_module__,
"searchsuggestions": _webpack_path_to_module__
};
ignoreNodeModules
Type: Boolean
Default: true unless "node_modules" is used within the import string, then false. Can be set manually to either true or false in which case that value is respected.
ignoreNodeModules Example:
entry.js (source)
import cmpts from "../**/*.js"; // node_modules are not included by defaultentry2.js (source)
import cmpts from "../node_modules/**/*.js"; // node_modules are included by default