webpack-import-glob

2.0.0 verified Sat Apr 25 auth: no javascript deprecated

Webpack preloader that expands glob patterns in ES6 import statements (and SCSS @import) into multiple explicit imports. Version 2.0.0 is stable, last updated 2018. Replaces the unmaintained import-glob package. Supports JS and SCSS files. Works as a preloader or chained loader. Differentiators: simple glob expansion, no code splitting. Alternatives like webpack-import-glob-loader are more modern but this remains functional for legacy webpack 2-3 projects.

Common errors

error Module parse failed: Unexpected token (1:0) ↓

cause Loader not configured as preloader; other loaders (e.g., babel) encounter glob syntax before expansion.

fix

Add enforce: 'pre' to the rule: { enforce: 'pre', test: /\.js$/, loader: 'import-glob' }

error Cannot find module 'import-glob' ↓

cause Did not install the underlying import-glob package.

fix

npm install import-glob --save-dev

error Error: The type 'pre' in the array must be a string... ↓

cause Webpack 1/2 deprecated preloaders; need to use enforce: 'pre' instead of preloaders array.

fix

Remove 'preloaders' and use 'rules' with enforce: 'pre'.

Warnings

deprecated Package is no longer maintained; last update 2018. May not work with webpack 4+. ↓

fix Consider alternatives like webpack-import-glob-loader or use webpack's built-in resolve.alias with manual imports.

gotcha Loader must be applied as a preloader (enforce: 'pre') otherwise it will break other loaders like babel. ↓

fix Use enforce: 'pre' or preloaders (deprecated) in webpack config.

gotcha Glob patterns only work for default imports or side-effect imports; named imports like import { foo } from './**/*.js' are not expanded. ↓

fix Use default import for aggregation, or side-effect imports for styles.

gotcha The package is named webpack-import-glob but the actual loader name is import-glob. Installing import-glob as a dependency is mandatory. ↓

fix Run: npm install import-glob --save-dev, not webpack-import-glob.

Install

npm install webpack-import-glob

yarn add webpack-import-glob

pnpm add webpack-import-glob

Imports

default

wrong

import { modules } from './foo/**/*.js' (named import for glob results is not supported)

correct

import modules from './foo/**/*.js'

Glob import returns an array of modules as default export. Named imports won't work.

side-effect import

wrong

import * from './foo/**/*.scss' (no need for namespace import for side-effects)

correct

import './foo/**/*.scss'

For side-effect imports, just the path without default or named import.

webpack loader configuration

wrong

{ test: /\.js$/, use: 'import-glob' } (must be preloader/enforce:pre, not ordinary loader)

correct

{ test: /\.js$/, enforce: 'pre', loader: 'import-glob' }

Loader must run before other loaders to expand globs. Use enforce: 'pre' or preloaders in webpack 2/3.

Quickstart

Shows installation and webpack configuration to enable glob imports in JS files, with example usage.

// Install: npm install --save-dev import-glob webpack-import-glob
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: 'pre',
        loader: 'import-glob'
      }
    ]
  }
};
// Then in any JS file:
import modules from './components/**/*.js'; // expands to multiple imports
console.log(modules); // array of module exports