Конфигурация Webpack для разрешения индекса в папке

Question

У меня есть проект, где я использую webpack, реагирую, sass.Структура моего проекта и webpack.config ниже.В проекте мне нужно для цели импортировать запись @import 'styles/BigComp/index.sass' или import BigComp from './components/BigComp/Index.jsx', но я хотел опустить «index», чтобы настроить webpack config таким образом, чтобы он мог выяснить, что если в папке есть файл index.sassили Index.jsx, тогда webpack нужно импортировать.В заключение я хочу написать import BigComp from './components/BigComp' для импорта ./components/BigComp/Index.jsx и написать @import 'styles/BigComp' для импорта styles/BigComp/index.sass.Надеюсь, я проясню.

// Do not try to run. It's not a code.
+components
|-+BigComp
  |-Index.jsx
  |-ElemOfBigComp0.jsx
  |-ElemOfBigComp1.jsx
  |-ElemOfBigComp2.jsx

+styles
|-+BigComp
  |-index.sass
  |-elem0.sass
  |-elem1.sass

// webpack.config.js
const path = require('path');
const rules = [
  {
    test: /\.s[ac]ss$/,
    use: [
     'css-loader',
     'sass-loader',
    ],
  },
  {
    test: /\.jsx?$/,
    use: ['babel-loader'],
    exclude: ['/node_modules'],
  },
];

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: { rules },
};