# directory-named-webpack-plugin

> A Webpack plugin that treats a file with the name of directory as the index file

Latest version **4.1.0** (published 2023-12-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install directory-named-webpack-plugin
pnpm add directory-named-webpack-plugin
yarn add directory-named-webpack-plugin
bun add directory-named-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.1.0 |
| Published | 2023-12-06 |
| First published | 2015-09-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 180 |
| Author | Shaketbaby |
| Maintainers | shaketbaby |
| Keywords | webpack, plugin |

## Links

- npm: https://www.npmjs.com/package/directory-named-webpack-plugin
- Repository: https://github.com/shaketbaby/directory-named-webpack-plugin
- Homepage: https://github.com/shaketbaby/directory-named-webpack-plugin#readme
- Issues: https://github.com/shaketbaby/directory-named-webpack-plugin/issues
- npm.io page: https://npm.io/package/directory-named-webpack-plugin

## Dependencies (2)

- [object-assign](https://npm.io/package/object-assign.md) ^4.1.0
- [enhanced-resolve](https://npm.io/package/enhanced-resolve.md) ^4.0.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 4.1.0 (latest) — 2023-12-06
- 4.0.1 — 2019-03-08
- 4.0.0 — 2018-03-06
- 2.3.0 — 2017-11-29
- 2.2.3 — 2017-07-05
- 2.2.2 — 2017-07-03
- 2.2.1 — 2017-06-27
- 2.2.0 — 2017-06-26
- 2.1.0 — 2017-02-08
- 1.5.0 — 2017-02-08
- 1.4.2 — 2017-01-25
- 1.4.1 — 2017-01-25
- 2.0.1 — 2017-01-15
- 2.0.0 — 2017-01-05
- 1.4.0 — 2017-01-04
- … 5 more at https://npm.io/package/directory-named-webpack-plugin/versions

## README

### master requires Webpack V4, please use 2.x versions for Webpack V2.x & V3.x and 1.x versions for Webpack V1

[![NPM](https://nodei.co/npm/directory-named-webpack-plugin.png?downloads=true)](https://nodei.co/npm/directory-named-webpack-plugin/)

## What
Normally, Webpack looks for **index** file when the path passed to `require` points to a directory; which means there may have a lot of **index** files.

This plugin makes it possible to control what file within directory will be treated as entry file.

## Usage

Add the following to Webpack's config file:

```javascript
  var DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");

  resolve: {
    plugins: [
      new DirectoryNamedWebpackPlugin()
    ]
  }
```

Then when `require("component/foo")` and the path "component/foo" is resolved to a directory, Webpack will try to look for `component/foo/foo.js` as the entry (given default options).

If there is also an index file, e.g. `index.js`, and it should be used as entry file instead of the file with the same name of directory, pass `true` as the first argument when creating new instance.

```javascript
  var DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");

  resolve: {
    plugins: [
      new DirectoryNamedWebpackPlugin(true)
    ]
  }
```

You can also pass in an options object to further customise the plugin:
```javascript
  var DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");
  var path = require("path");

  resolve: {
    plugins: [
      new DirectoryNamedWebpackPlugin({
        honorIndex: true | false, // defaults to false

        // respect "main" fields defined in package.json
        // if it's an Array, values will be used as name of the fields to check
        // defaults to true, which is the same as ["main"]
        honorPackage: true | false | ["main"],

        // if it's matching with resolving directory's path, plugin will ignore the custom resolving.
        // it can be string/regex or Array of string/regex.
        exclude: /node_modules/

        ignoreFn: function(webpackResolveRequest) {
          // custom logic to decide whether request should be ignored
          // return true if request should be ignored, false otherwise
          return false; // default
        },

        // define where the imported files will be resolving by DirectoryNamedWebpackPlugin.
        // it can be string/regex or Array of string/regex.
        include: [
          path.resolve('./app/components'),
          path.resolve('./app/containers')
        ]

        transformFn: function(dirName, dirPath, webpackResolveRequest) {
          // use this function to provide custom transforms of resolving directory name
          // return desired filename or array of filenames which will be used
          // one by one (honoring order) in attempts to resolve module
          return dirName; // default
        }

        // name of the resolver hook that should be tapped into
        // by default, uses "before-existing-directory"
        resolverHook: "before-existing-directory"
      })
    ]
  }
```

---
_Source: https://npm.io/package/directory-named-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._