Webpack loader that enables ES6 imports with glob patterns. Leverages Webpack's Enhanced Resolver to resolve aliases.
Inspired by webpack-import-glob-loader
?
,+
, and!
globbing characters have issues as they're currently incompatible with Enhanced Loader. Looking for workarounds!
@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;
npm install glob-import-loader --save-dev
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";
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. |
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 ...
};
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 path
The path to the imported file. module
Variable reference to the value exported by the file. importString
The import string use by Webpack to import the file -
varname
- The variable name used when importing.
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__
};
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.
entry.js (source)
import cmpts from "../**/*.js"; // node_modules are not included by default
entry2.js (source)
import cmpts from "../node_modules/**/*.js"; // node_modules are included by default