https://github.com/sebastiandeutsch/component-directory-webpack-plugin

A Webpack 2 plugin that treats a file with the name of directory as the index file - it's great for importing React components.
https://github.com/sebastiandeutsch/component-directory-webpack-plugin

Last synced: about 1 month ago
JSON representation

A Webpack 2 plugin that treats a file with the name of directory as the index file - it's great for importing React components.

• Host: GitHub
• URL: https://github.com/sebastiandeutsch/component-directory-webpack-plugin
• Owner: sebastiandeutsch
• License: mit
• Created: 2016-08-14T22:10:25.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-16T00:08:12.000Z (about 8 years ago)
• Last Synced: 2024-05-16T16:06:11.907Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 17.6 KB
• Stars: 23
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## 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. It's also hard for debugging since the DevTools will report an error in **index**.

This plugin makes it possible to use the name of the directory as the name of the entry file, makes it easier to find.

## Usage

Install the plugin:

```

npm install component-directory-webpack-plugin

```

Add the following to Webpack's config file:

```javascript

  var ComponentDirectoryPlugin = require("component-directory-webpack-plugin");

  resolve: {

    plugins: [new ComponentDirectoryPlugin()]

    extensions: ['', '.js', '.jsx'],

  },

```

Then when `import MyComponent from 'components/MyComponent'` and the path "component/MyComponent" is resolved to a directory, Webpack will try to look for `component/MyComponent/MyComponent.js` as the entry.

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 ComponentDirectoryPlugin = require("component-directory-webpack-plugin");

  resolve: {

    plugins: [new ComponentDirectoryPlugin(true)]

    extensions: ['', '.js', '.jsx'],

  },

```

## Tests

``` javascript

npm test

```

[![Build Status](https://secure.travis-ci.org/sebastiandeutsch/component-directory-webpack-plugin.png?branch=master)](http://travis-ci.org/sebastiandeutsch/component-directory-webpack-plugin)

## Caveats

This plugin has been developed to work with Webpack 2 for similar plugins that work with Webpack 1 use [Directory Named Plugin](https://github.com/shaketbaby/directory-named-webpack-plugin) or [Directory name as main Plugin](https://github.com/spalger/webpack-directory-name-as-main).

## Copyright

Copyright (c) 2016 [Sebastian Deutsch](https://twitter.com/sippndipp) / [9elements](http://9elements.com/)

This plugin is heavily inspired by the [Directory Named Plugin](https://github.com/shaketbaby/directory-named-webpack-plugin) which is unfortunately broken for Webpack 2.