Webpack 配置来解析文件夹中的索引

Question

我有一个项目，我使用 webpack、react、sass。我的项目结构和 webpack.config 下面。在项目中，我需要导入 write@import 'styles/BigComp/index.sass'或import BigComp from './components/BigComp/Index.jsx'，但我想省略“index”，以某种方式设置 webpack 配置，它可以弄清楚，如果文件夹中有文件index.sass或Index.jsx，那么 webpack 需要导入它。总之，我想写入import BigComp from './components/BigComp'import./components/BigComp/Index.jsx并写入@import 'styles/BigComp'import 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 },
};