How to modify Webpack config to load modules from folder name

Question

I'd like to load modules using just a folder name, without specifying file name in that specific folder. Like it's done here in react-starter-kit:

I imagine that this is needed to be done in Webpack configuration, but I cannot wrap my head around that yet (I'm fresh to javascript).

My app is structured this way atm and I have to reference both folder and file name in order to import it.

That's my current webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: '#cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    'tether',
    'font-awesome-loader',
    'bootstrap-loader',
    './app/App',
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'app.js',
    publicPath: '/',
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react', 'stage-0']
      }
    }, {
      test: /\.css$/,
      loaders: [
        'style',
        'css?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]',
        'postcss'
      ]
    }, {
      test: /\.scss$/,
      loaders: [
        'style',
        'css?modules&importLoaders=2&localIdentName=[name]__[local]__[hash:base64:5]',
        'postcss',
        'sass'
      ]
    }, {
      test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "url?limit=10000"
    }, {
      test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
      loader: 'file'
    }]
  },
  postcss: [autoprefixer],
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new htmlWebpackPlugin({
      title: 'MoiApp'
    }),
    new webpack.ProvidePlugin({
      "window.Tether": "tether"
    })
  ]
};

However I could not find anything useful on Google. Perhaps I'm making my query not correct enough. Please advice on how to achieve that.

score 3 · Accepted Answer · answered Mar 17 '16 at 22:52

There are different ways to achieve this. Without using some special plugins, you can get this behaviour by putting a pretty small package.json file into the folder with an entry main pointing to the file to be used like it is done in the react starter kit.

{
  "name": "Header",
  "version": "0.0.0",
  "private": true,
  "main": "./Header.js"
}

Another option is to rename the main in every folder to index.js. For details and resolving orders please see the docs at:

https://webpack.github.io/docs/resolving.html

There is also a plugin that helps you avoiding to rename all your files to index.js. I don't have experience with that:

https://www.npmjs.com/package/directory-named-webpack-plugin

This looks exactly it. Thanks a lot! – Evaldas Buinauskas Mar 18 '16 at 06:04 — Evaldas Buinauskas, Mar 18 '16 at 06:04

How to modify Webpack config to load modules from folder name

1 Answers1