How to use the webpack.ResolverPlugin function in webpack

chunkFilename: (opts.dev ? '[id].js' : '[name].js') +
      (opts.longTermCaching && !opts.prerender ? '?[chunkhash]' : ''),

    publicPath: '/',
    sourceMapFilename: 'debugging/[file].map',
    libraryTarget: opts.prerender ? 'commonjs2' : undefined,
    pathinfo: opts.debug
  };

  var plugins = [
    statsPlugin(opts),
    new webpack.PrefetchPlugin('react'),
    new webpack.PrefetchPlugin('react/lib/ReactComponentBrowserEnvironment'),
    // new ReactStylePlugin('bundle.css'),
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    ),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(opts.minimize ? 'production' : 'development')
      }
    })
  ];

  if (opts.prerender) {
    aliasLoader['react-proxy$'] = 'react-proxy/unavailable';
    externals.push(/^react(\/.*)?$/);
    plugins.push(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }));
  }

  if (opts.hotComponents) {

{ test: /\.css$/,                     loader: "style-loader!css-loader" },
      // Support for LESS (with hot module replacement)
      { test: /\.less$/,                    loader: "style-loader!css-loader!less-loader" },
      // Copy all assets in to asset folder (use hash filename)
      { test: /\.(png|jpg|gif|woff|eot|ttf|svg)$/,      loader: "file-loader?name=assets/[hash].[ext]" },
      // Load all *.jade as templates
      { test: /(?!\.html)\.jade$/,          loader: "jade-loader" },
      // Copy all .html.jade as static html files (keep filename)
      { test: /index[a-z-]*\.html\.jade$/,  loader: "file-loader?name=[path][name]&context=./src!jade-html-loader" },
      // Copy all .html as static file (keep filename)
      { test: /index[a-z-]*\.html$/,        loader: "file-loader?name=[path][name].html&context=./src" },
    ]
  },
  plugins:[
    // Add Bower support
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    ),

    // Add Angular support (annotate for minification)
    new ngAnnotatePlugin({add: true}),
    //new AngularPlugin(),
    
    // Optimize output; dedupe 
    new webpack.optimize.DedupePlugin(),
    
    // Optimize output; group libraries in seperate file
    new webpack.optimize.CommonsChunkPlugin('libs','libs.bundle.js',['main'],Infinity),
    
    // Set global 'ENV' variable to support multiple builds 
    new webpack.DefinePlugin({
      DEV_SERVER_IP: JSON.stringify(argv.ip),

};

var externals = {
    // require("jquery") is external and available
    //  on the global var jQuery, which is loaded with CDN
    'jquery': 'jQuery',
    'jquery-ui': 'jQuery.ui',
    'raven-js': 'Raven',
    'MathJax': 'MathJax'
};

var plugins = [
    // Bundle common code between modules
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    // Bower support
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
    ),
    // Make jQuery available in all modules without having to do require('jquery')
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    }),
    // Slight hack to make sure that CommonJS is always used
    new webpack.DefinePlugin({
        'define.amd': false
    }),
];


var output = {
    path: './website/static/public/js/',

path.join(__dirname, 'node_modules'),
    ],
    moduleDirectories: [
      'bower_components',
      'node_modules',
    ],
    alias: {
    }
  },

  amd: {
    pouchdb: true
  },

  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(
        'bower.json', ['main'])
    ),
    new NGAnnotatePlugin({
      add: true
    }),
    new webpack.optimize.DedupePlugin(),
    new HtmlWebpackPlugin({
      pkg      : require('./package.json'),
      template : 'app/entry-template.html',
    }),
    // new webpack.optimize.UglifyJsPlugin({
    //   mangle:true,
    //   compress:{
    //     drop_console:true
    //   },

devtool: this.sourceMaps,
      profile: this.profile || false,

      output: {
        path: this.env.workingDir,
        filename: '[name].bundle.js',
        sourceMapFilename: '[file].map',
        publicPath: `${this.urlBasePath || ''}/bundles/`,
        devtoolModuleFilenameTemplate: '[absolute-resource-path]'
      },

      recordsPath: resolve(this.env.workingDir, 'webpack.records'),

      plugins: [
        new webpack.ResolverPlugin([
          new DirectoryNameAsMain()
        ]),
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin('[name].style.css', {
          allChunks: true
        }),
        new CommonsChunkPlugin({
          name: 'commons',
          filename: 'commons.bundle.js'
        }),
      ],

      module: {
        loaders: [
          {
            test: /\.less$/,

this.webpackConfig = {
      entry: bundles.getEntriesToCompile(),

      devtool: this.sourceMaps ? '#source-map' : false,

      output: {
        path: bundles.dir,
        filename: '[name].js',
        sourceMapFilename: '[file].map',
        publicPath: '/bundles/',
        devtoolModuleFilenameTemplate: '[resource-path]'
      },

      plugins: [
        new webpack.ResolverPlugin([
          new DirectoryNameAsMain()
        ]),
        new webpack.NoErrorsPlugin(),
        new webpack.optimize.DedupePlugin(),
        new ExtractTextPlugin('[name].style.css', {
          allChunks: true
        })
      ],

      module: {
        loaders: [
          { test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!less?sourceMap') },
          { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap') },
          { test: /\.(html|tmpl)$/, loader: 'raw' },
          { test: /\.png$/, loader: 'url?limit=2048!file?name=[path][name].[ext]' },
          { test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file?name=[path][name].[ext]' },

}]
  },
  postcss: [
    require('autoprefixer')()
  ],
  plugins: [
    new HtmlPlugin({
      template: path.resolve(__dirname, 'src/index.html')
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('development')
      }
    }),
    new webpack.ResolverPlugin([
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('package.json', ['main'])
    ], ['context']),
    new webpack.NoErrorsPlugin()
  ]
};

customAttrSurround: [
      [/#/, /(?:)/],
      [/\*/, /(?:)/],
      [/\[?\(?/, /(?:)/]
    ],
    customAttrAssign: [/\)?\]?=/]
  },

  plugins: [
    /*
     * Plugin: ResolverPlugin
     * Description: To use components from bower.
     *
     * See: https://github.com/webpack/docs/wiki/list-of-plugins#resolverplugin
     */
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
    ),

    /*
     * Plugin: OccurenceOrderPlugin
     * Description: Varies the distribution of the ids to get the smallest id length
     * for often used ids.
     *
     * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
     * See: https://github.com/webpack/docs/wiki/optimization#minimize
     */
    //new webpack.optimize.OccurenceOrderPlugin(true),

    /*
     * Plugin: CommonsChunkPlugin
     * Description: Shares common code between the pages.

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
	entry: [
		/*===== yeoman entry hook =====*/
		'./src/index.js'
	],
	output: {
		path: path.join(__dirname, 'build'),
		filename: 'bundle.js'
	},
	resolve: {
		root: [path.join(__dirname, 'bower_components')]
	},
	plugins: [
		new webpack.ResolverPlugin(
			new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
		),
		new ExtractTextPlugin('styles.css', {
            allChunks: true
        }),
        new webpack.ProvidePlugin({
        	/*===== yeoman provide plugin hook =====*/
        	m: 'mithril'
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(true),
        new webpack.optimize.UglifyJsPlugin({
        	sourceMap: true,
		    mangle: true,
		    compress: {
		        warnings: false