Component-resolver-webpack NPM

component-resolver-webpack

Webpack plugin that provides simple convention on how to organize components:

The component file should be placed in a directory named as component itself e.g button.jsx must be placed inside button directorty: button/button.jsx.

Idea

It allows to shorten require calls and make them more expressive:

var Button = require('ui/button');
// instead of:
var Button = require('ui/button/button.jsx');

Why not 'ui/button.jsx'?

Because then you can use directories as module containers. As an example, you can combine component-resolver-webpack with component-css-loader:

var Button = require('ui/button');

// Single `require` to get React component and style associated with it.
require('ui/button/button.styl');
var Button = require('ui/button/button.jsx');

Directory also may contain tests (Jest-like approach).

Installation

Install via npm:

npm install --save-dev component-resolver-webpack

Update webpack config (default: webpack.config.js):

var webpack = require('webpack');
var ComponentResolverPlugin = require('component-resolver-webpack');

module.exports = {
  plugins: [
    new webpack.ResolverPlugin([
      new ComponentResolverPlugin(
        // array of extensions e.g `['js']` (default: `['jsx', 'js']`)
      )
    ])
  ]
};

You also may want to specify modulesDirectories in webpack config:

// ...

module.exports = {
  // ...

  resolve: {
    modulesDirectories: [
      // It will allow to use path without leading `./` in require
      // for directories placed in `app`:
      'app'
    ]
  }
}