directory-named-webpack-plugin

4.1.0 verified Sat Apr 25 auth: no javascript

Webpack resolve plugin that allows using a file named after its directory (e.g., foo/foo.js) instead of index.js as the entry point for directory imports. v4.1.0 supports Webpack >=4, with v2.x for Webpack 2/3 and v1.x for Webpack 1. Configurable via options like honorIndex, honorPackage, exclude, include, transformFn, and resolverHook. Provides fine-grained control over resolve behavior per directory, overcoming the limitation of always using index files.

Common errors

error Error: Cannot find module 'foo' from 'bar' ↓

cause DirectoryNamedWebpackPlugin is not resolving the desired file because honorIndex is true and index.js exists, or include/exclude is misconfigured.

fix

Set honorIndex: false or ensure the directory has a file named after it. Check include/exclude settings.

error TypeError: DirectoryNamedWebpackPlugin is not a constructor ↓

cause Using ESM import incorrectly. This package is not an ESM default export.

fix

Use require('directory-named-webpack-plugin') or dynamic import with default property: const { default: DirNamedPlugin } = await import('directory-named-webpack-plugin')

error Error: Hook 'before-existing-directory' is not supported (webpack deprecation) ↓

cause Webpack removed or renamed the resolver hook used by default.

fix

Update the plugin to latest version or use resolverHook: 'directory' or 'resolve' as fallback (check webpack docs).

Warnings

breaking v4.x requires webpack >=4.0.0. Using with webpack 2 or 3 will fail. ↓

fix Use v2.x for webpack 2/3, v1.x for webpack 1.

gotcha By default, honorIndex is false, so index files are ignored. If you expect index.js to be used as fallback, set honorIndex: true. ↓

fix new DirectoryNamedWebpackPlugin({ honorIndex: true })

gotcha If exclude does not cover node_modules, the plugin will also apply to external packages, potentially causing unexpected resolve behavior. ↓

fix Add exclude: /node_modules/ or specify include paths to restrict scope.

deprecated Using a boolean argument instead of options object is deprecated in favor of the options object. ↓

fix Use new DirectoryNamedWebpackPlugin({ honorIndex: true }) instead of new DirectoryNamedWebpackPlugin(true).

gotcha The resolverHook option defaults to 'before-existing-directory'. Changing it to a different hook may cause the plugin to not work as expected. ↓

fix Only change resolverHook if you understand webpack's resolver plugins deeply.

Install

npm install directory-named-webpack-plugin

yarn add directory-named-webpack-plugin

pnpm add directory-named-webpack-plugin

Imports

DirectoryNamedWebpackPlugin
wrong
```
import DirectoryNamedWebpackPlugin from 'directory-named-webpack-plugin';
```
correct
```
const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
```
This package does not provide a default ESM export; use CommonJS require(). For webpack config files, CommonJS is standard.

DirectoryNamedWebpackPlugin

wrong

const { DirectoryNamedWebpackPlugin } = await import('directory-named-webpack-plugin');

correct

const { default: DirectoryNamedWebpackPlugin } = await import('directory-named-webpack-plugin');

ESM named import does not work because the package exports only as module.exports. Use default import via dynamic import.

new DirectoryNamedWebpackPlugin()
wrong
```
new DirectoryNamedWebpackPlugin(true)
```
correct
```
new DirectoryNamedWebpackPlugin({ honorIndex: true })
```
Constructor accepts either a boolean (honorIndex shorthand) or an options object. Using a boolean may be confusing; prefer options object for clarity.

Quickstart

CommonJS webpack config using DirectoryNamedWebpackPlugin with exclude and include options.

const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');

module.exports = {
  resolve: {
    plugins: [
      new DirectoryNamedWebpackPlugin({
        honorIndex: false,
        exclude: /node_modules/,
        include: [
          path.resolve(__dirname, 'src/components'),
          path.resolve(__dirname, 'src/containers')
        ]
      })
    ]
  }
};